如何在body中精确水平居中div并适配滚动条宽度？

这个问题我太有共鸣了！滚动条简直是居中布局里的“隐形捣蛋鬼”，明明看起来代码没问题，结果两边边距就是对不齐。其实核心逻辑很简单：要让你的div基于包含滚动条的整个视口宽度来计算居中，而不是浏览器减去滚动条后的内容宽度。下面几个超简单的技巧，完全不用复杂CSS，就能实现和示例网站一样的效果：

1. 用margin: 0 auto配合弹性宽度（首选） #

这是最经典也最可靠的方法，关键是别给div设固定死的宽度，而是用max-width或者百分比宽度，再让浏览器自动分配左右边距：

首先先重置html和body的默认内外边距（很多人忽略这一步，导致布局跑偏）：

html, body {
  margin: 0;
  padding: 0;
}

然后给需要居中的div加样式：

.centered-div {
  max-width: 1200px; /* 你想要的最大宽度，超过这个宽度就不再拉伸 */
  margin: 0 auto; /* 让浏览器自动计算左右边距 */
  padding: 0 1.5rem; /* 可选：加一点内边距，防止内容在小屏幕上贴边 */
}

如果不需要限制最大宽度，直接用百分比宽度也可以：

.centered-div {
  width: 90%; /* 占父容器（body）宽度的90% */
  margin: 0 auto;
}

为什么这个方法能解决滚动条问题？因为margin: 0 auto是基于父容器（也就是body）的宽度来计算边距的，而body的宽度会自动适配视口——当滚动条出现时，body的宽度会自动减去滚动条的宽度，浏览器会重新计算div的左右边距，保证两边完全相等。

2. 避免手动设置左右边距 #

很多人会犯的错是手动给div设margin-left: 100px; margin-right: 100px;，这种固定值在没有滚动条时可能没问题，但滚动条出现后，视口宽度变窄，固定边距就会导致两边不对齐。一定要让浏览器自动计算边距，也就是用margin: 0 auto，而不是手动指定数值。

3. 确认没有干扰的全局样式 #

检查一下有没有给body设overflow-x: scroll或者固定宽度，这些都会破坏自动居中的逻辑。保持body的默认状态（宽度自适应视口，overflow:auto）就好。

示例网站的蓝色header能实现完美居中，大概率就是用了第一种方法——重置默认边距+max-width+margin: 0 auto，完全不需要复杂的CSS布局，就是把基础样式用对了而已。

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