在CSS中，有许多属性可以帮助我们将块级元素居中，如：
text-align: center; /* 将元素内文本居中，对图片无效 */ margin: 0 auto; /* 水平居中，对块级元素无需指定宽度 */ display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */
其中，display: flex;可以实现水平和垂直的居中，但需要指定容器的高度。如果不指定高度，元素会消失。
若您想要居中的是一个块级元素，可以将它的display属性设置为inline-block，再使用text-align: center;即可水平居中。
在实际开发中，我们可以将这些居中的属性结合使用，以达到最优的效果。
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 1px solid #ccc;
}
.box {
display: inline-block;
width: 200px;
height: 100px;
background-color: #f00;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 24px;
font-weight: bold;
}
<div class="container">
<div class="box">居中</div>
</div>居中
上述代码将会实现一个300px高的父容器，里面包含一个宽为200px、高为100px、文本为“居中”的红色块，实现了自适应、水平和垂直居中。