我试着div在我的页面上居中.它应该只使用相对值,因此它的大小仅取决于窗口大小.
我找到了一个解决方案,它使盒子居中,但似乎没有正确计算边距.相反,它的大小比body窗口大.在下面的示例中,firebug告诉我该框的#container大小为1265x335.当检查#content它的大小时,每侧是506x134和2px边界,这与我的计算相符.但最高利润率为316.
我有什么不对吗？
保证金应该是335的25%,对吧？
我怎样才能解决这个问题？
这是HTML:
<body>
<div id="container">
<div id="content">
nothing...
</div>
</div>
</body>
这里的CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0em 0em 0em 0em;
}
#container {
height: 100%;
}
#content {
text-align: center;
width: 40%;
height: 40%;
margin-top: 25%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
border: 2px solid black;
}
来自http://www.w3.org/TR/CSS2/box.html:
百分比是根据生成的框的包含块的宽度计算的.请注意,对于"margin-top"和"margin-bottom"也是如此.
所以你得到了1265的25%,这解释了你所看到的行为.不幸的是,我没有提供任何解决方案.
编辑:CSS3使此语句取决于包含块是否为水平(您希望它是垂直的).我不认为任何浏览器都会实现所需的block-progression属性(无论如何它可能会产生意想不到的副作用).