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上设置负边距来完成。

看看这里 - 这是你的小提琴的更新：

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

我在height

中添加了margin-top和.content

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

}

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

Answer 2

您需要设置一个负上边距，该边距应为div高度的50％。

宽度为100％的盒子不在页面中心

2 个答案: