如何在flex元素内垂直居中文本[重复]

Posted 2023-03-29

【中文标题】如何在flex元素内垂直居中文本[重复]

【英文标题】：How to vertically center text inside flex element [duplicate]

【发布时间】：2018-07-25 14:47:11

【问题描述】：

我有一个元素，它可以包含 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 属性的组合，这也会使文本垂直对齐。请问，任何人都可以建议，如何在内部元素中垂直居中文本？

【问题讨论】：

如果您的意思是 .inner_element 应该与父级的高度相同，并且它们的文本应该居中对齐，请这样做：jsfiddle.net/apuaov5g/5

【参考方案1】：

要使弹性项目沿主轴居中（在您的情况下为列/垂直），请将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>

【参考方案2】：

你必须给你的包装器一个固定的高度，这样内部元素就可以参考它来计算中心。