如何將專案居中

在本指南中,您可以瞭解如何在另一個元素內部水平和垂直居中對齊專案。

居中一個盒子

要使用 CSS 在另一個框內居中對齊一個框,您需要在父容器上使用 CSS 盒子對齊 屬性。由於這些對齊屬性尚未支援塊級和內聯佈局,因此您需要將父元素設定為 flexgrid 容器,以啟用對齊功能。

在下面的示例中,我們為父容器設定了 display: flex;然後將 justify-content 設定為 center 以水平居中對齊,並將 align-items 設定為 center 以垂直居中對齊。

注意:可以使用此技術對另一個元素內部的一個或多個元素進行任何型別的對齊。在上面的示例中,您可以嘗試將值更改為 justify-contentalign-items 的任何有效值。

另請參閱