1. text-align 属性：
text-align 属性通常用于调整文本在容器内的水平对齐方式。它可以应用于块级元素和表格元素。
.container {
text-align: center; /* left | right | center | justify */
}
2. margin 属性：
通过设置左右外边距，可以将块级元素水平居中。这对于已知宽度的块级元素很有效。
.container {
margin-left: auto;
margin-right: auto;
}
3. flex 布局：
Flexbox 是一个强大的布局模型，可以轻松实现水平居中。通过设置容器的 display 属性为 flex，并使用 justify-content 属性，可以实现元素在主轴上的居中。
.container {
display: flex;
justify-content: center;
}
4. position 属性：
通过设置 position: absolute; 和 left: 50%; 结合使用 transform 进行偏移，可以将元素水平居中。这对于已知宽度的绝对定位元素很有用。
.element {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
5. grid 布局：
使用 Grid 布局也是实现水平对齐的一种有效方式。通过将容器的 display 属性设置为 grid，并在子元素上使用 justify-self 属性，可以实现水平对齐。
.container {
display: grid;
}
.element {
justify-self: center;
}
选择使用哪种方式取决于具体的布局需求和你所支持的浏览器版本。最近的 CSS 布局技术，如 Flexbox 和 Grid，提供了更灵活且强大的工具，可以轻松实现水平对齐和其他复杂的布局效果。
转载请注明出处：http://www.zyzy.cn/article/detail/4010/CSS