如何用display:inline-block实现三个等宽Div居中（不使用浮动）

嘿，我完全理解你想摒弃浮动、改用inline-block实现三个等宽盒子居中的需求，这确实是更现代也更易维护的布局思路。我来给你分享最规整且实用的实现方式，完美适配你想要的「盒子两侧拥有相等边距」的效果：

核心问题修正与优化思路 #

你的现有代码已经走对了方向，但有两个关键问题需要调整：

• inline-block元素之间默认会产生空格间隙，导致三个30%宽度的盒子总宽度超过容器，无法正常排列
• 容器的margin: 0 50px设置会挤压内部空间，不如让容器本身居中，再给内部盒子分配自适应边距

修正后的完整代码 #

CSS代码

#content-container {
  width: 100%;
  max-width: 1200px; /* 可选，限制容器最大宽度，避免屏幕过宽时盒子太散 */
  margin: 0 auto; /* 让容器本身在页面居中 */
  text-align: center;
  font-size: 0; /* 消除inline-block元素之间的空格间隙 */
}

#box1, #box2, #box3 {
  display: inline-block;
  height: 100%;
  width: 30%;
  font-size: 16px; /* 恢复子元素的字体大小，避免内容消失 */
  margin: 0 1.666%; /* 分配剩余空间：100% - 3*30% = 10%，6个边均分后约1.666% */
  box-sizing: border-box; /* 可选，让padding/border不影响宽度计算 */
}

#box1 { background-color: orange; }
#box2 { background-color: blue; }
#box3 { background-color: yellow; }

HTML代码

<div id="content-container" class="container">
  <div id="box1">
    <h1>Box 1</h1>
  </div>
  <div id="box2">
    <h1>Box 2</h1>
  </div>
  <div id="box3">
    <h1>Box 3</h1>
  </div>
</div>

关键细节解释 #

• 消除inline-block间隙：通过给容器设置font-size:0，可以彻底去掉元素间的空格，再给子元素单独设置字体大小保证内容正常显示
• 自适应边距计算：三个盒子各占30%，剩余10%的空间平均分配给6个边（每个盒子左右各一个边距），10% / 6 ≈ 1.666%，这样总宽度刚好填满容器，且每个盒子的左右边距完全相等
• 容器居中：用margin:0 auto让容器本身在页面水平居中，比固定margin:0 50px更适配不同屏幕尺寸
• box-sizing优化：添加box-sizing: border-box后，盒子的padding和border不会额外增加宽度，布局更稳定

最终效果 #

替代方案（可选） #

如果你不想用font-size:0的方式消除间隙，也可以：

• 把HTML中三个盒子的标签连在一起（去掉换行和空格），但这种方式不够优雅，不利于代码维护
• 给盒子设置margin-right: -4px，但这是依赖字体大小的hack，不如font-size的方式可靠

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