如何在div中垂直对齐多段文本？Flex方案失效求解决方案

哦，我懂你的问题了——你想让.valign容器里的整组文本（标题加两个段落）在200px高的容器里垂直居中，但当前的flex写法没达到预期效果，对吧？

问题出在哪？ #

当你给.valign设置display: flex时，默认的flex-direction是row（横向排列），这会把里面的<h3>和两个<p>元素当成独立的flex项横向排列开。此时align-items: center只是让这些横向分布的元素在垂直方向上各自居中，但这显然不是你想要的“整段文本作为一个整体垂直居中”的效果。

方案一：给文本套一个容器（无CSS改动） #

最简单的办法是把所有文本元素放进一个子容器里，让flex容器只处理这个子容器的垂直居中：

<div class="valign">
  <div class="text-group">
    <h3>Title of the paragraph</h3>
    <p>Lorem ipsum</p>
    <p>Next paragraph</p>
  </div>
</div>

你的原有CSS完全不用改：

.valign {
  display: flex;
  align-items: center;
  height: 200px;
}

现在flex容器只有一个子元素（.text-group），align-items: center会把这个文本块整体垂直居中，而文本块内部的元素会保持正常的纵向排版。

方案二：修改flex方向（无需额外HTML） #

如果你不想加额外的HTML标签，可以把flex容器的方向改成column，然后用justify-content: center来实现垂直居中：

.valign {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向居中 */
  height: 200px;
  /* 可选：控制文本的水平对齐，比如左对齐 */
  align-items: flex-start;
  /* 如果想让文本水平居中，就改成 align-items: center; */
}

这样容器里的<h3>和<p>会纵向排列，整个文本组会在200px高的容器里垂直居中。

两种方案都能解决问题，你可以根据自己的HTML结构偏好来选择~

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