如何使父div内的多行内容及中间div垂直居中对齐？

嘿，我来帮你搞定这个垂直居中的需求！你现在的代码已经让三个子div在.container里垂直居中了，但中间的.second里的两行文本还没对齐——原因很简单，.second本身还不是flex容器，没法控制内部元素的垂直位置。

核心解决方案：给.second添加flex布局 #

只需要修改.second的CSS，让它变成垂直方向的flex容器，就能让里面的h2和p轻松实现垂直居中：

.container { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  /* 可选：加个高度方便直观看到居中效果 */
  min-height: 100px;
  border: 1px solid #ccc;
}
.second { 
  text-align: left; 
  flex-grow: 2; 
  /* 关键代码：把.second变成垂直flex容器 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 确保.second占满容器的垂直高度，让内部内容真正居中 */
  min-height: 100%;
}
img { margin-right: 20px; }
/* 可选：去掉h2和p的默认margin，避免间距过大影响视觉 */
h2, p { margin: 0; }

HTML代码保持不变即可：

<div class="container">
  <div>
    <img src="http://via.placeholder.com/75x75">
  </div>
  <div class="second">
    <h2>Please vertically center both</h2>
    <p>of us!</p>
  </div>
  <div>
    Right
  </div>
</div>

原理拆解 #

• .container的align-items: center负责让三个子模块（图片容器、.second、右侧文本）在整个大容器里垂直居中；
• 给.second设置display: flex; flex-direction: column后，它的子元素（h2和p）会垂直排列，再配合justify-content: center，就能让这两行文本在.second的高度范围内垂直居中；
• min-height: 100%是为了确保.second的高度和.container一致，让内部内容的居中效果更明显。

这样调整后，中间div里的两行内容就都能完美垂直对齐啦！

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