如何将项目居中

在本指南中,您可以了解如何在另一个元素内部水平和垂直居中对齐项目。

居中一个盒子

要使用 CSS 在另一个框内居中对齐一个框,您需要在父容器上使用 CSS 盒子对齐 属性。由于这些对齐属性尚未支持块级和内联布局,因此您需要将父元素设置为 flexgrid 容器,以启用对齐功能。

在下面的示例中,我们为父容器设置了 display: flex;然后将 justify-content 设置为 center 以水平居中对齐,并将 align-items 设置为 center 以垂直居中对齐。

注意:可以使用此技术对另一个元素内部的一个或多个元素进行任何类型的对齐。在上面的示例中,您可以尝试将值更改为 justify-contentalign-items 的任何有效值。

另请参阅