Flex布局下如何实现子元素内文本的垂直居中？

嘿，我来帮你搞定这个垂直居中的问题！其实用Flexbox就能完美解决，可能是之前的属性组合没踩对关键点，我给你两种实用的方案，你可以根据自己的布局需求来选：

方案一：子元素作为Flex容器实现居中 #

这是最直观的方式，父元素负责纵向排列子元素，每个子元素自己控制内部文本的居中：

HTML结构 #

<div class="parent">
  <div class="child">第一行文本</div>
  <div class="child">第二行较长的测试文本内容</div>
  <div class="child">第三行</div>
</div>

CSS代码 #

.parent {
  display: flex;
  flex-direction: column; /* 让子元素按column方向纵向排列 */
  /* 可选：给父元素设置高度，比如min-height: 400px; 让布局更直观 */
  gap: 10px; /* 子元素之间的间距，替代margin更方便 */
}

.child {
  display: flex;
  justify-content: center; /* 水平居中文本 */
  align-items: center; /* 垂直居中文本 */
  height: 80px; /* 给子元素设置固定高度，才能看到明显的垂直居中效果 */
  border: 1px solid #eee; /* 加边框方便观察布局 */
}

方案二：用Grid快速实现一键居中 #

如果你觉得写两个Flex属性麻烦，可以用Grid的place-items属性，一行代码搞定同时水平垂直居中：

子元素CSS修改 #

.child {
  display: grid;
  place-items: center; /* 同时控制水平和垂直方向的居中 */
  height: 80px;
  border: 1px solid #eee;
}

关键注意点 #

• 如果子元素没有设置高度，它会默认贴合文本内容，这时候垂直居中的效果不明显，所以一定要给子元素设置合适的高度（比如固定高度、min-height，或者让子元素占满父元素的可用高度）。
• 如果希望子元素自动填充父元素的高度，可以给父元素设置固定高度，然后给子元素加flex: 1，这样子元素会均分父元素的高度，同时内部文本依然保持居中。

内容的提问来源于stack exchange，提问作者user3523426