如何在 flex 元素中垂直居中文本

Question

我有一个元素，它可以包含 1-3 个其他元素。假设是这样的：

<div id="elem1">
   <div class="inner_element">aaaa</div>
   <div class="inner_element">bbbb</div>
</div>

内部元素必须按列方向定位。我需要他们的文字垂直和水平居中。

我的 CSS 是这样的：

#elem1 {
    display: flex;
    flex-direction: column;
}

.inner_element {
    text-align: center;
    flex: 1 100%;
}

文本是水平对齐的，但我找不到任何 flex 属性的组合，也可以垂直对齐文本。拜托，任何人都可以建议，如何将内部元素中的文本垂直居中？

Answer 1

您必须为包装器指定一个固定高度，以便内部元素参考该高度计算中心。

Answer 2

要使弹性项目沿主轴居中（在您的情况下 column/vertically），请将 justify-content: center; 添加到容器中（并清除子项的弹性设置）：

#elem1 {
  height: 180px;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.inner_element {
  text-align: center;
}

<div id="elem1">
  <div class="inner_element">aaaa</div>
  <div class="inner_element">bbbb</div>
</div>

如何在 flex 元素中垂直居中文本

How to vertically center text inside flex element

css

center

vertical-alignment

flexbox