内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用
我想将一个<div>
(或一个<table>
)元素放置在屏幕的中心,而不考虑屏幕大小。换句话说,“顶”和“底”上的空间应该相等,“右”和“左”侧的空间应该相等。我只想用CSS来完成这个任务。
我试过以下,但它不工作:
<body>
<div style="top:0px; border:1px solid red;">
<table border="1" align="center">
<tr height="100%">
<td height="100%" width="100%" valign="middle" align="center">
We are launching soon!
</td>
</tr>
</table>
</div>
</body>
注意:
如果<div>
元素(或<table>
)在网站上滚动或者不滚动,则无论如何。只是希望它在页面加载时居中。
简单的方法,如果你有一个固定的宽度和高度:
#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
请不要使用内联样式!这是一个工作示例http://jsfiddle.net/S5bKq/。
随着转换变得越来越无处不在,你可以在不知道弹出窗口的宽度/高度的情况下做到这一点
.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
简单!JSFiddle在这里:http : //jsfiddle.net/LgSZV/