塊級、絕對定位和表格佈局的盒對齊
CSS 盒對齊模組詳細說明了對齊在各種佈局方法中的工作原理。在本指南中，我們將探討盒對齊如何在塊級佈局（包括浮動、定位和表格元素）的上下文中工作。由於本指南旨在詳細說明特定於塊級佈局和盒對齊的內容，因此應結合盒對齊指南閱讀，該指南詳細說明了盒對齊在各種佈局方法中的共同特性。
align-content 和 justify-content
justify-content 屬性不適用於塊容器或表格單元格。
align-content 屬性應用於塊軸，以便在容器內對齊盒子的內容。如果請求了內容分佈方法（如 space-between、space-around 或 space-evenly），則將使用回退對齊方式，因為內容被視為單個對齊主體。
justify-self
justify-self 屬性用於在內聯軸上對齊其包含塊內的專案。
此屬性不適用於浮動元素或表格單元格。
align-self
align-self 屬性不適用於塊級盒子（包括浮動），因為塊軸中有多個專案。它也不適用於表格單元格。
絕對定位元素
對齊容器是定位塊，考慮到 top、left、bottom 和 right 的偏移值。normal 關鍵字解析為 stretch，除非定位項是替換元素，在這種情況下它解析為 start。
當前在這些佈局方法中進行對齊
由於我們目前在塊級佈局中沒有瀏覽器支援盒對齊，因此您的對齊選項要麼是使用現有對齊方法之一，要麼是將容器內的單個專案也變成彈性專案，以便使用彈性盒中指定的對齊屬性。
在彈性盒出現之前，塊的水平對齊通常是透過在塊上設定自動外邊距來實現的。margin 的 auto 值將吸收該維度中的所有可用空間，因此將左右外邊距設定為 auto，您可以將塊推到中心位置。
.container {
width: 20em;
margin-left: auto;
margin-right: auto;
}
在表格佈局中，您可以使用 vertical-align 屬性來對齊單元格內單元格的內容。
對於許多用例，將塊容器轉換為彈性專案將為您提供所需的對齊功能。在下面的示例中，一個帶有一個專案的容器已轉換為彈性容器，以便能夠使用對齊屬性。
<div class="box">
<div></div>
</div>
.box {
height: 300px;
border: 2px dotted rgb(96 139 168);
}
.box > * {
border: 2px solid rgb(96 139 168);
border-radius: 5px;
background-color: rgb(96 139 168 / 0.2);
}
.box {
display: flex;
align-items: center;
justify-content: center;
}
.box div {
width: 100px;
height: 100px;
}