css如何上下居中

方法一：使用display:flex

HTML代码：

<div class="parent">
  <div class="child">
    这是一段文字。
  </div>
</div>

CSS代码：

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

.child {
  text-align: center;
}