css 实现 html 元素内文字水平垂直居中的N种方法

在CSS中，实现文本的水平垂直居中有多种方法，以下是几种常用的实现方式：

1. 使用Flexbox布局

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

2. 使用Grid布局

.container {
  display: grid;
  place-items: center; /* 水平垂直居中的简写 */
}

3. 使用绝对定位和transform

.container {
  position: relative;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 使用line-height（适用于单行文本）

.container {
  height: 100px;
  line-height: 100px; /* 等于容器高度 */
}
.text {
  display: inline-block;
  vertical-align: middle;
}

5. 使用::before伪元素和vertical-align（适用于单行文本或inline/inline-block元素）

.container {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}
.container::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.text {
  display: inline-block;
}

每种方法都有自己的使用场景，可以根据实际需求选择合适的方法。