以边距为中心的元素上的负边距边框：0 auto;

Question

我有一个固定宽度的页面，我想使用 Border CSS 命令添加一个简单的边框。但是，我不希望此边框使页面膨胀并导致较小的屏幕具有水平滚动条。我对 CSS 不太熟悉，但我知道我已经研究过使用负边距来抵消边框的宽度，因为我已经做了类似的事情来为我不想移动的其他元素添加边框。但是当我在我的主容器 div 上这样做时，所有东西都会偏离中心并被砸到页面的左侧。我正在使用 Blueprint CSS 框架，我发现里面有些东西弄乱了我的边距，我发现主容器应用了“边距：0 自动；”使其在页面上居中。

所以，我现在问，我怎么能在页面上应用负边距边框，同时仍然使布局在屏幕上居中？我试图将容器包装在一个 div 中并对其应用边框和负边距，但没有骰子，我尝试在容器内嵌套一个 div 并将边框应用于容器，但这也很糟糕。有人把骨头扔在这里！

Answer 1

如果负边距有效，您可以通过添加具有固定宽度和margin: 0 auto 的包装 div 来恢复居中。

在我的测试中，负边距并没有改变盒子的宽度。其他一些策略：

1. 调整 div 的宽度以抵消边框添加的宽度。
2. 在 div 中添加背景图片，模拟左右边框。
3. 使用 JavaScript 检测窗口的宽度并在必要时移除边框。
4. 添加body { overflow-x: hidden } 以抑制水平滚动条。
5. 仅当有足够空间时才使用CSS3 media query 添加边框（对于旧版浏览器，可选择回退到 JavaScript（参见 #3））。

更新：您可以使用box-sizing: border-box 代替负边距，这样边框一开始就不会增加元素的宽度。