将<div>元素定位在屏幕中心
将<div>元素定位在屏幕中心
提问于 2012-03-26 01:07:13
我想在屏幕中央放置一个<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>)是否与网站一起滚动，这两种方式都可以。只是希望在页面加载时居中显示。
回答 14
Stack Overflow用户
回答已采纳
发布于 2012-03-26 01:20:23
如果你有一个固定的宽度和高度，最简单的方法是：
#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}请不要使用内联样式！这是一个有效的http://jsfiddle.net/S5bKq/示例。
Stack Overflow用户
发布于 2014-03-09 13:27:00
随着现在对转换的支持越来越普遍，您可以在不知道弹出窗口的宽度/高度的情况下执行此操作
.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}简单！JSFiddle地址：http://jsfiddle.net/LgSZV/
CSS更新：请访问https://css-tricks.com/centering-css-complete-guide/，获取有关居中的详尽指南。将它添加到这个答案中，因为它似乎获得了很多眼球。
Stack Overflow用户
发布于 2013-07-09 21:48:04
设置宽度和高度，就可以了。
div {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
}如果您希望元素尺寸灵活(并且不关心遗留浏览器)，请使用XwipeoutX的答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9862167
复制相关文章
相似问题
腾讯云开发者
