如何让多个固定尺寸的Flex项内文本垂直居中对齐？

要让多个Flex项里的文本垂直居中且所有段落中心处于同一位置，同时保持文本宽高固定，你可以这样调整代码：

核心思路 #

让所有.child容器高度统一，再把每个容器变成Flex容器，内部段落垂直居中，这样不管段落内容多少，中心都会对齐在同一水平线。

修改后的代码 #

.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch; /* 强制所有子项高度一致，匹配最高的那个 */
}

.child {
  background: red;
  width: 50px;
  display: flex;
  align-items: center; /* 让内部段落垂直居中 */
  justify-content: center; /* 可选：让文本水平居中，视觉更协调 */
}

/* 保持文本宽高固定，清除段落默认外边距避免干扰 */
.child p {
  width: 50px;
  height: auto; /* 若需固定高度可替换为具体值，比如height: 30px; */
  margin: 0;
}

<div class='container'>
  <div class='child'>
    <p>Lorem </p>
  </div>
  <div class='child'>
    <p>Lorem ipsum</p>
  </div>
  <div class='child'>
    <p>Lorem ipsum dol</p>
  </div>
</div>

效果说明 #

• align-items: stretch 会让所有.child自动拉伸到和最高子项相同的高度，确保容器基准线一致
• 每个.child作为Flex容器，align-items: center 会把段落固定在容器垂直中心，最终所有段落的中心就会处于同一位置
• 段落的宽高通过.child p的样式固定，不会被容器调整

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