要使块元素（例如 <div> ）水平居中，请使用 margin: auto;。
设置元素的宽度将防止其延伸到容器的边缘。
然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：
实例代码；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width:400px;
background-color:gray;
text-align:center;
padding:20px;
}
p.p1{
margin:auto;
background-color:black;
color:white;
padding:20px;
}
</style>
</head>
<body>
<h1>水平居中实例</h1>
<div>
<p class="p1">水平和垂直居中的元素</p>
</div>
<p style="color:red;">注：要使块元素（例如 div）水平居中，请使用 margin: auto;</p>
</body>
</html>
运行效果：
评论