如何居中一个元素
在本指南中，您可以找到如何将一个元素水平和垂直地居中到另一个元素内的信息。
居中一个框
要使用 CSS 将一个框居中到另一个框内，您需要在父容器上使用 CSS 框对齐 属性。由于这些对齐属性尚未获得块级和内联布局的浏览器支持，您需要将父容器设置为 flex 或 grid 容器，以启用对齐功能。
在下面的示例中，我们为父容器设置了 display: flex；然后将 justify-content 设置为 center 以在水平方向上居中，并将 align-items 设置为 center 以在垂直方向上居中。
html
<div class="wrapper">
<div class="box">center me!</div>
</div>
css
.wrapper {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: rgb(69 164 181);
border-radius: 5px;
padding: 10px;
color: white;
}
注意： 您可以使用此技术在另一个元素内对一个或多个元素进行任何类型的对齐。在上面的示例中，您可以尝试将值更改为 justify-content 和 align-items 的任何有效值。