html居中对齐代码怎么写

<!-- 使用 CSS 的 text-align 属性来实现文本内容的居中对齐 -->
<div style="text-align: center;">
    这里是居中对齐的文本内容。
</div>

<!-- 使用 Flexbox 布局来实现块级元素的水平和垂直居中对齐 -->
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
    <div>
        这里是居中对齐的块级元素。
    </div>
</div>

<!-- 使用 CSS Grid 布局来实现块级元素的水平和垂直居中对齐 -->
<div style="display: grid; place-items: center; height: 100vh;">
    <div>
        这里是居中对齐的块级元素。
    </div>
</div>

解释说明：

1. text-align: center;：适用于内联元素（如文本），使其在父元素中水平居中。
2. Flexbox 布局：通过 display: flex; justify-content: center; align-items: center; 实现子元素在父元素中的水平和垂直居中对齐。height: 100vh; 确保父元素高度为视口高度，使居中效果更明显。
3. CSS Grid 布局：通过 display: grid; place-items: center; 实现类似的效果，place-items: center; 是 justify-items: center; 和 align-items: center; 的简写。

这些方法可以根据具体需求选择使用。