在屏幕中心定位<div>元素？内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
- 回答 (2)
- 关注 (0)
- 查看 (25)
我想将一个<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/
扫码关注云+社区