块级、绝对定位和表格布局的盒对齐
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;
}