css文本自适应水平垂直居中

要实现文本的自适应水平垂直居中，可以使用CSS的flex布局和伪元素。具体步骤如下：

1. 将要居中的文本包裹在一个div容器中，并将该容器设置为display:flex;以启用flex布局。

2. 设置该容器的justify-content和align-items属性为center，使其在水平和垂直方向上居中对齐。

3. 在该容器内部添加一个伪元素:before，并将其设置为content:""; display:inline-block; height:100%; vertical-align:middle;。该伪元素的作用是将其放置在容器内部的中间位置，从而使文本相对于该伪元素进行垂直居中对齐。

4. 最后，在伪元素:before中添加文本，并设置其text-align:center;以实现文本的水平居中。

以下是示例代码：

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

.center:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.center span {
  position: relative;
  z-index: 1;
  text-align: center;
}

在HTML中，可以使用以下代码来应用这些样式：

<div class="center">
  <span>要居中的文本</span>
</div>