0

我正在尝试在屏幕上居中放置我的内容。问题是当我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/

我错过了什么？

提前致谢。

4

2 回答 2

4

您也必须减去 div 的高度top。这可以通过在margin-top.

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

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

我添加了一个heightandmargin-top到你的.content

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

}​</p>

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

于 2012-12-18T00:13:20.170 回答
1

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

于 2012-12-18T00:13:39.967 回答