如何实现两列div水平居中？表格转div布局重构遇阻

嘿，我太懂这种老页面重构的头疼了——当年靠嵌套表格堆出来的布局，换成div总觉得哪里不对味。别担心，用Flexbox或者Grid分分钟搞定你要的效果，咱们一步步来：

先明确你的核心需求 #

• 第一个容器（原表格1）水平居中显示
• 下方的表格B和C要围绕页面中心对齐，且两者必须紧密相邻

方案一：Flexbox实现（推荐，灵活易维护） #

这种方案适合大多数场景，尤其是B和C组合后整体居中的情况（也就是它们的共同中心和页面中心重合）。

HTML结构（替换原表格） #

把原来的表格都换成语义化的div容器，结构更清晰：

<div class="page-wrap">
  <!-- 原第一个表格 -->
  <div class="top-container">第一个容器内容</div>
  
  <!-- 包裹B和C的容器 -->
  <div class="bottom-pair">
    <div class="box-b">表格B内容</div>
    <div class="box-c">表格C内容</div>
  </div>
</div>

CSS样式 #

用Flexbox的垂直排列和居中属性，轻松实现需求：

/* 先重置默认样式，避免浏览器差异 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-wrap {
  /* 垂直排列内部元素 */
  display: flex;
  flex-direction: column;
  /* 让所有子元素水平居中 */
  align-items: center;
  /* 控制顶部容器和B/C组合的间距 */
  gap: 30px;
  /* 可选：让页面占满视口高度，方便看居中效果 */
  min-height: 100vh;
  padding-top: 20px;
}

.bottom-pair {
  /* 让B和C水平排列 */
  display: flex;
  /* 取消间距，让两者紧密相邻 */
  gap: 0;
}

/* 以下是示例样式，你可以根据实际内容调整 */
.top-container, .box-b, .box-c {
  border: 1px solid #666;
  padding: 1.5rem;
}

.box-b {
  width: 180px;
  background: #f5f5f5;
}

.box-c {
  width: 220px;
  background: #e8e8e8;
}

方案二：精准围绕页面中心对齐（B左、C右，以中心为界） #

如果你的需求是B的右边缘和C的左边缘刚好对齐页面中心，可以用定位来实现：

修改.bottom-pair的CSS即可 #

.bottom-pair {
  /* 设置宽度为0，让容器中心刚好对应页面中心 */
  width: 0;
  position: relative;
}

.box-b {
  position: absolute;
  /* B的右边缘对齐容器中心（即页面中心） */
  right: 0;
}

.box-c {
  position: absolute;
  /* C的左边缘对齐容器中心（即页面中心） */
  left: 0;
}

为什么之前用div效果不好？ #

当年的表格布局是靠表格单元格的默认对齐、自动宽度来实现排版的，换成div后如果还用传统的float、inline-block，很容易出现莫名的间距、对齐偏移问题。而现代CSS布局（Flexbox/Grid）就是专门解决这类排版痛点的，代码更简洁，维护性也强。

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