保证金自动变为负值答案

【问题标题】：Margin auto goes to negative values保证金自动变为负值
【发布时间】：2013-02-14 13:03:27
【问题描述】：

我的边距有问题：自动 - 垂直居中 #something { width: 97%; height: 300px; border: 1px solid red; position: absolute; top: 0; bottom: 0; margin: auto; }

这适用于每个现代浏览器 - 当页面（视口）高于 300 像素时，它垂直居中，但是，当页面（视口）低于 300 像素时，它会在任何地方停止，除了在 firefox 中...在 firefox 运行在其他浏览器中它很好（也许它的功能很差，但它的逻辑功能），居中元素的顶部消失在视口的顶部。

http://jsfiddle.net/LhHed/2/ 这是上帝的例子——当你调整结果窗口的大小时，在 Firefox 中运行良好，而在其他浏览器中则不行。可以修吗？还是firefox功能不好？

【问题讨论】：

【解决方案1】：

据我所知，您希望分隔线的顶部显示在页面顶部。这目前没有发生，因为您将位置设置为top:0; bottom:0;，top 属性与bottom 属性冲突，最终将分隔线定位到页面底部。只需删除 bottom 属性即可防止元素的顶部出现在视口之外：

#something {
    width: 97%;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    margin: auto;
}

【讨论】：

绝对不是...它工作正常，因为顶部和底部设置为 0，边距设置为自动，因此#something 垂直居中...请参阅dev8.newlogic.cz 以获取实时示例跨度>
垂直居中你只需要margin: 0 auto;你不需要绝对定位。您的问题使您难以理解您真正想要发生的事情。
是的，我的英语很糟糕...我不需要保证金：0 auto;因为它是水平居中的，还是我弄错了方向？
对不起，我混淆了我的垂直和水平！然而，绝对定位并不是要走的路。见：blog.themeforest.net/tutorials/vertical-centering-with-css
margin: {top/bottom} {left:right}; 所以margin: 0 auto 将顶部/底部设置为0，将左侧/右侧设置为auto。

【解决方案2】：

当我将position: relative 用于body 元素时，我在浏览器中解决了这个问题。现在它也可以在 Firefox 和其他浏览器中使用。 http://dev8.newlogic.cz上的实时示例

【讨论】：