css 水平居中

有多种方法可以实现 CSS 水平居中，以下是其中几种常用的方法：

1. 使用 text-align 属性

将父元素的 text-align 属性设置为 center，如下所示：

.parent {
  text-align: center;
}

这会使父元素内所有行内元素和文本都居中对齐。

2. 使用 margin 属性

将子元素的 margin 属性设置为 auto，如下所示：

.child {
  margin: 0 auto;
}

这会使子元素在父元素内水平居中对齐。

3. 使用 flexbox

将父元素的 display 属性设置为 flex，并使用 justify-content 和 align-items 属性将子元素居中，如下所示：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

这会使子元素在父元素内水平和垂直居中对齐。

4. 使用 grid

将父元素的 display 属性设置为 grid，并使用 justify-items 和 align-items 属性将子元素居中，如下所示：

.parent {
  display: grid;
  justify-items: center;
  align-items: center;
}

这会使子元素在父元素内水平和垂直居中对齐。