css 文本垂直居中

/* 使用 Flexbox 实现文本垂直居中 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  height: 300px;          /* 设置容器高度 */
}

/* 使用 line-height 实现单行文本垂直居中 */
.single-line-text {
  height: 100px;          /* 设置容器高度 */
  line-height: 100px;     /* 行高等于容器高度 */
}

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

解释说明：

1. Flexbox 方法：通过 display: flex，结合 justify-content: center 和 align-items: center，可以轻松实现文本的水平和垂直居中。这种方法适用于单行或多行文本。

2. line-height 方法：对于单行文本，可以通过设置 line-height 等于容器的高度来实现垂直居中。注意，这种方法只适用于单行文本。

3. table-cell 方法：通过将元素设置为 display: table-cell 并使用 vertical-align: middle，可以实现多行文本的垂直居中。