HTML - 如何将元素水平居中

在 HTML 中，可以使用多种方法将元素水平居中。以下是一些最常用的方法：

1. 使用 text-align 属性

可以将 text-align 属性设置为 center，将块级元素水平居中。

<div style="text-align:center;">Hello World!</div>

2. 使用 margin 属性

可以使用 margin 属性将一个块级元素水平居中。将左右 margin 设置为 auto，可以使元素相对于其容器水平居中。

<div style="margin: 0 auto;">Hello World!</div>

3. 使用 flexbox

Flexbox 是一种 CSS 布局模式，可以非常容易地将元素水平和垂直居中。将容器的 display 属性设置为 flex，然后使用 justify-content 和 align-items 属性，即可将子元素水平和垂直居中。

<div style="display:flex; justify-content:center; align-items:center;">Hello World!</div>

4. 使用 grid

Grid 是另一种 CSS 布局模式，也可以轻松将元素水平和垂直居中。将容器的 display 属性设置为 grid，然后使用 justify-content 和 align-items 属性，即可将子元素水平和垂直居中。

<div style="display:grid; justify-content:center; align-items:center;">Hello World!</div>

以上是 HTML 中常用的几种将元素水平居中的方法。选择哪一种方法应该根据实际情况和个人喜好来决定。