如何实现两个div水平同行对齐 一个居中一个居左或居右

需要实现两个div的水平对齐布局：

• 其中一个div位于屏幕水平方向的正中心
• 另一个div可自由放置在居中div的左侧或右侧
• 两个元素始终处于同一水平线
  预期布局效果如下图：
  

CSS部分 #

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
  color: wheat;
  text-align: center;
}

.b1 {
  margin: auto;
}

.b2 {
  position: absolute;
  top: 0px;
  right: 0px;
}

HTML部分 #

<div class="box b1">box1</div>
<div class="box b2">box2</div>

• 上述实现方式是否可靠、具备响应式适配能力？
• 需要一套通用实现方案：保证一个元素固定在屏幕中心位置，调整侧边元素位置时不会影响居中元素的定位
• 尝试过flexbox实现思路，但不清楚如何在保证第一个元素严格居中的前提下，自由调整另一个元素的位置而不造成居中元素偏移

你当前的实现并不可靠，也不具备完善的响应式能力，存在两个核心缺陷：

• 绝对定位的侧边盒写死了top:0，只要页面存在滚动条、外层容器有定位偏移、或者居中盒因为内容变化调整了垂直位置，两个元素就会错开，根本无法保证始终在同一水平线
• 两个元素的定位逻辑完全独立，小视口下会直接重叠，没有任何适配容错空间

最通用、维护成本最低的实现方案是使用CSS Grid布局，天然满足「居中元素严格定位、侧边元素不干扰居中位置、多元素垂直对齐」的所有要求，实现代码如下：

/* 外层容器 */
.layout-container {
  display: grid;
  /* 三列网格：左右两列等宽弹性分配，中间列宽度适配内容 */
  grid-template-columns: 1fr auto 1fr;
  /* 所有子元素垂直居中，保证永远在同一水平线 */
  align-items: center;
  min-height: 100vh;
  padding: 0 12px;
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: wheat;
  text-align: center;
  line-height: 100px;
}

/* 居中元素固定放在中间列，永远严格水平居中 */
.center-box {
  grid-column: 2;
  justify-self: center;
}

/* 左侧侧边盒：放在第一列，默认靠右对齐贴紧居中元素，改justify-self可调整位置 */
.side-box-left {
  grid-column: 1;
  justify-self: end;
}

/* 右侧侧边盒：放在第三列，默认靠左对齐贴紧居中元素，改justify-self可调整位置 */
.side-box-right {
  grid-column: 3;
  justify-self: start;
}

对应的HTML结构：

<div class="layout-container">
  <!-- 不需要左侧元素直接删除这行即可，居中元素位置完全不受影响 -->
  <div class="box side-box-left">左侧box</div>
  <div class="box center-box">居中box</div>
  <!-- 不需要右侧元素直接删除这行即可，居中元素位置完全不受影响 -->
  <div class="box side-box-right">右侧box</div>
</div>

这个方案的核心优势：

• 居中元素永远在容器水平正中心，不管侧边元素是否存在、宽度如何调整、位置怎么偏移，都不会把居中元素挤偏
• 不需要手动计算垂直位置，通过网格的对齐属性天然保证两个元素处于同一水平线，不会出现错位
• 适配成本低：小屏幕下可以通过媒体查询调整网格布局为上下排列，不会出现元素硬重叠的问题
• 扩展灵活：如果需要在左右两侧加多个元素，只需要把对应列改成弹性盒布局即可，不需要调整核心的居中逻辑

如果项目需要兼容IE10及以下的老旧浏览器，也可以用Flex实现：核心思路是在居中元素左右放两个flex:1的等宽占位块，把居中元素挤到正中心，再把侧边元素绝对定位到对应占位块区域即可，不过实现逻辑比Grid繁琐，非特殊兼容场景优先选择Grid方案。

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