如何实现两个独立Div的垂直对齐？附多盒子布局需求

推荐用Flexbox实现，代码简洁且完全匹配你的布局需求：

HTML 结构 #

<div class="container">
  <div class="box box2">Box 2（宽度固定，高度动态）</div>
  <div class="box box1">Box 1<br>动态宽高<br>由内容自动撑开</div>
  <div class="box box3">Box 3（固定宽高）</div>
  <div class="box box4">Box 4（宽度固定，高度动态）</div>
</div>

CSS 代码 #

/* 主容器设置Flex布局，核心是垂直对齐 */
.container {
  display: flex;
  align-items: center; /* 实现Box1与Box3垂直居中对齐 */
  gap: 15px; /* 盒子间的间距，可按需调整 */
  padding: 10px;
}

/* Box2和Box4：宽度固定，高度随容器动态变化 */
.box2, .box4 {
  width: 150px; /* 固定宽度，可自定义数值 */
}

/* Box1：宽度自动占据剩余空间，高度由内容决定 */
.box1 {
  flex: 1;
}

/* Box3：固定宽高 */
.box3 {
  width: 180px; /* 自定义固定宽度 */
  height: 120px; /* 自定义固定高度 */
}

/* 可选：添加基础样式区分盒子 */
.box {
  border: 1px solid #333;
  padding: 10px;
}

关键说明 #

• align-items: center 是实现Box1与Box3垂直对齐的核心，它会让所有子元素在容器内沿垂直方向居中对齐；
• Box1的 flex: 1 让它自动占据容器的剩余宽度，实现宽度动态；
• Box2和Box4仅设置固定宽度，高度会跟随容器（由Box1和Box3的总高度决定），满足高度动态需求；
• 如果需要顶部/底部对齐，只需把 align-items: center 改成 flex-start 或 flex-end 即可。

如果坚持用CSS Grid，也可以这样实现：

.container {
  display: grid;
  grid-template-columns: 150px 1fr auto 150px; /* 对应Box2、Box1、Box3、Box4的宽度 */
  align-items: center; /* 垂直对齐核心 */
  gap: 15px;
  padding: 10px;
}

.box3 {
  width: 180px;
  height: 120px;
}

.box {
  border: 1px solid #333;
  padding: 10px;
}

HTML结构和之前一致，Grid通过定义列轨道，结合align-items: center同样能实现需求。

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