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

Question

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

所以，我现在问，如果仍然在屏幕上居中布局，我怎么能在页面上应用负边距边框？我已经尝试将容器包装在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代替负边距，这样边框就不会首先添加到元素的宽度。