css文字上下居中

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

/* 使用行内块元素和垂直对齐实现文字上下居中 */
.text-center {
  height: 100vh;          /* 设置容器高度 */
  line-height: 100vh;     /* 设置行高与容器高度相同 */
  text-align: center;     /* 水平居中 */
}

/* 使用绝对定位和 transform 实现文字上下居中 */
.center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 向左和向上移动自身宽度和高度的一半 */
}

解释说明：

1. Flexbox 方法：通过 display: flex，结合 justify-content: center 和 align-items: center，可以轻松实现水平和垂直居中。适用于大多数现代浏览器。
2. 行内块元素方法：通过设置 line-height 与容器高度相同，并使用 text-align: center 来实现水平居中。这种方法适用于单行文本。
3. 绝对定位和 transform 方法：通过将元素绝对定位到父容器的中心位置，然后使用 transform: translate(-50%, -50%) 将元素向左和向上移动自身宽度和高度的一半，从而实现精确居中。