居中html代码怎么写

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

<!-- 使用 CSS 的 margin 属性来居中对齐块级元素 -->
<div style="width: 50%; margin: 0 auto;">
    这是一个宽度为50%且水平居中的块级元素。
</div>

<!-- 使用 Flexbox 来居中对齐子元素（水平和垂直居中） -->
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
    这里是使用 Flexbox 水平和垂直居中的内容。
</div>

解释说明：

1. text-align: center;：用于居中文本内容。适用于所有内联元素（如文本、图片等），使其在父元素中水平居中。
2. margin: 0 auto;：通过设置左右外边距为 auto，可以使块级元素在其父元素中水平居中。需要指定宽度（如 width: 50%）以确保元素有明确的尺寸。
3. display: flex; justify-content: center; align-items: center;：使用 Flexbox 布局可以轻松实现子元素的水平和垂直居中。justify-content: center; 控制水平居中，align-items: center; 控制垂直居中。