如何让两个并排div等高且外层wrapper垂直居中？

嘿，我来帮你搞定这个问题！你之前的代码里用inline-block会让盒子高度随内容变化，想要实现两个盒子始终等高并排，同时外层容器垂直居中，用Flexbox布局是最简洁靠谱的方案——它天生支持子元素等高，还能轻松搞定垂直居中的需求。

下面是修改后的完整代码：

CSS 代码 #

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  /* 用Flex实现wrapper内部内容的垂直+水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerWrapper {
  /* 内层用Flex让两个box并排，自动等高 */
  display: flex;
  gap: 15px; /* 可选：给两个盒子加一点间距，看着更舒服 */
}

.box {
  padding: 25px 25px;
  opacity: 0.8;
  background-color: #32CD32;
  /* 让盒子宽度自适应内容，同时保持等高 */
  flex: 0 0 auto;
  /* 如果你想让两个盒子宽度平分，把上面的flex改成flex: 1; 就行 */
}

HTML 代码 #

<div class="wrapper">
  <div class="innerWrapper">
    <div class="box">This is a box</div>
    <div class="box">
      <div>This is a box</div>
      <div>This is a box</div>
    </div>
  </div>
</div>

核心要点说明： #

• 外层.wrapper通过display: flex + align-items: center实现内部内容的垂直居中，justify-content: center则是让内容在水平方向也居中（如果不需要可以去掉）。
• 内层.innerWrapper同样设置display: flex，它的子元素.box会自动成为Flex项，不管各自内容多少，高度都会统一对齐到最高的那个盒子的高度，完美实现等高效果。
• 如果需要固定盒子高度（不是自适应内容最高的那个），直接给.box加height: 160px;这样的固定值就行，两个盒子高度会完全一致。

内容的提问来源于stack exchange，提问作者brijesh-pant