css - 宽度为 100% 的框不在页面中央

Question

我正试图在屏幕上居中放置一个框，以便在其中放置我的内容。问题是，当我将 top 设置为 50% 时，该框不会 100% 位于页面中心。大约是顶部 60% 和底部 40%。

这是 HTML 代码:

​<div class="content">
    test
</div>​

这是样式表:

body, html {
    color: #eaeaea;
    font-family: Arial;
    font-size: 12px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.content {
    background-color: #000000;
    padding: 10px 15px;
    position: fixed;
    top: 50%;
    width: 100%;
}​

演示:http://jsfiddle.net/edgren/cceSw/

我错过了什么？

提前致谢。

Answer 1

您还必须从 top 中减去 div 的高度。这可以通过在 margin-top 上设置负边距来实现。

看看这里——这是对你的 fiddle 的更新:

http://jsfiddle.net/cceSw/3/

我在你的 .content 中添加了 height 和 margin-top

.content {
background-color: #000000;
padding: 10px 15px;
position: fixed;
top: 50%;
width: 100%;
height:50%;
margin-top:-25%;

}

如果您的内容可能会有不同的大小，那么您可以使用 JQuery 来计算其高度并动态设置其边距。