.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="/static/favicon.ico">
<title>XYZ</title>
<style>
{# 全屏居中 #}
.main-center-m1 {
text-align: center;
width:300px;
{# height:350px;#}
margin:auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
{# 高度控制,不是全屏居中 #}
.main-center-m2 {
text-align: center;
width: 300px;
height:350px;
margin:auto;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
</head>
<body>
<div class="main-center-m1">
<h1>Hello HTML</h1>
</div>
</body>
</html>
margin:atuo
和 position:absolute
的位置不能换,知道的同学可以留个言🙂