css 文字垂直居中

/* 使用 flexbox 实现文字垂直居中 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

/* 使用 line-height 实现单行文字垂直居中 */
.single-line {
  height: 50px; /* 设置容器高度 */
  line-height: 50px; /* 设置行高与容器高度相同 */
}

/* 使用 table-cell 实现多行文字垂直居中 */
.multi-line {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  height: 100px; /* 设置容器高度 */
}

解释说明：

1. Flexbox 方法：通过 display: flex 和 align-items: center，可以轻松实现子元素在父容器中的垂直居中。同时使用 justify-content: center 可以实现水平居中。
2. Line-height 方法：适用于单行文字的垂直居中，通过设置 line-height 与容器高度相同，使文字垂直居中。
3. Table-cell 方法：适用于多行文字的垂直居中，通过将容器设置为 table-cell 并使用 vertical-align: middle 来实现垂直居中。