以margin为中心的元素的负边界边界：0 auto;

Question

我有一个固定宽度的页面，我想用Border CSS命令添加一个简单的边框。但是，我不希望这个边框将气泡放在页面上，并使较小的屏幕具有水平滚动条。我对CSS的评价不是很高，但是我足够了解我研究了使用负边距来抵消边框的宽度，因为我已经做了类似的操作来为其他元素添加边框，而我不想移动边框。但是当我在主容器div上这样做时，所有内容都会偏离中心并砸到页面的左侧。我正在使用Blueprint CSS框架，我发现里面有一些东西弄乱了我的利润空间，我发现主容器应用了一个“保证金：0汽车;”将其集中在页面上。

所以，我现在问，我该如何在页面上应用负边界边界，同时仍将屏幕布局居中？我试图将容器包装在一个div中，并将边界和负边距应用到它，但没有骰子，我尝试在容器中嵌套一个div，并将边框应用于容器，但是这种情况也很糟糕。有人在这里扔我一块骨头！

Answer 1

如果负余量正在工作，您可以通过添加具有固定宽度的包装div和margin: 0 auto来获得居中。

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

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

更新：而是负利润的，你也许可以使用box-sizing: border-box使边框没有在第一时间加入到元素的宽度。