我在Firefox中将div居中时遇到问题,在所有Webkit浏览器中似乎都能正常工作,所以我真的不知道自己在做什么错:

我的CSS:

html {
width: 100%;
height: 100%;
}

body {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
height: 100%;
width: 100%;
}

#Page {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

#LoginBackground {
position: absolute;
margin-top: -45%;
margin-left: -35%;
left: 50%;
top: 50%;
width: 70%;
height: 90%;
}


我的HTML:

<body>
<div id="Page">
<div id="LoginBackground">
</div>
</div>
</body>


这是Gecko引擎中的错误还是我做错了。

最佳答案

编辑
新提琴http://jsfiddle.net/FsjNu/2/

html {
width: 100%;
height: 100%;
}

body {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
height: 100%;
width: 100%;
}

#Page {
position: relative;
width: 100%;
    height:100%;
}

#LoginBackground {
border: 1px solid red;
height: 90%;
left: 50%;
margin-left: -35%;
position: absolute;
top: 5%;
width: 70%;


}

<body>
<div id="Page">
<div id="LoginBackground">
</div>
</div>
</body>

关于css - 垂直居中div,可与Webkit配合使用,但在Firefox中存在错误,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10233895/

10-11 14:03