如何使用 CSS 在 flexbox 内垂直对齐文本？

在 flexbox 中垂直对齐文本有很多种方法，本文将为你介绍其中的几种方式。

方法一：使用 align-items

align-items 属性用于设置元素在交叉轴上的对齐方式，它的默认值为 stretch，表示元素将拉伸以填满整个交叉轴。如果我们想要将元素垂直居中对齐，只需要将其设置为 center 即可：

.container {
  display: flex;
  align-items: center;
}

方法二：使用 justify-content 和 align-items

justify-content 属性用于设置元素在主轴上的对齐方式，默认值为 flex-start，表示元素将从主轴起点开始排列。我们可以将其设置为 center，将元素在主轴上居中对齐。然后再使用 align-items 将其在交叉轴上居中对齐：

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

方法三：使用 flex-direction 和 margin

flex-direction 属性用于设置元素排列的方向，默认值为 row，表示在水平方向上排列元素。我们可以将其设置为 column，在垂直方向上排列元素。然后使用 margin 将元素居中：

.container {
  display: flex;
  flex-direction: column;
}

.item {
  margin: auto;
}

注意：使用 margin: auto 的前提是父元素的高度已知。

以上就是使用 CSS 在 flexbox 内垂直对齐文本的几种方法，根据实际需求选择相应的方式即可。