flex布局文本上下居中

可以使用 Flex 布局中的 `align-items` 属性来实现文本的上下居中对齐。

具体实现方法如下：

HTML 代码：

<div class="container">
  <div class="text">这是一段文本</div>
</div>

CSS 代码：

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  height: 200px; /* 定义容器高度 */
}

.text {
  font-size: 24px; /* 设置字体大小 */
}

解释：

- 父容器 `.container` 使用 Flex 布局，同时通过 `align-items: center` 属性实现垂直居中对齐，`justify-content: center` 属性实现水平居中对齐。
- 子元素 `.text` 设置字体大小，文本默认垂直居中对齐，通过父容器的 Flex 布局实现水平居中对齐。

这样就可以实现文本的上下居中对齐了。