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

要使弹性项目沿主轴居中（在您的案例列/垂直方向上），请将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元素中垂直居中文本

2 个答案: