Html Div 水平居中垂直居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9656362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div horizontally center and vertically middle
提问by Tapas Bose
I want to align a div horizontally center and vertically middle of the bodyof a page.
我想将 div 水平居中对齐，垂直居中对齐body页面。
The css:
css：
.loginBody {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
.loginDiv {
position: absolute;
left: 35%;
top: 35%;
text-align: center;
background-image: url('Images/loginBox.png');
width:546px;
height:265px;
}
And I have this html:
我有这个 html：
<body class="loginBody">
<form id="form1">
<div class="loginDiv">
</div>
</form>
</body>
Now it is behaving as I want it to, but if I resize the browser, it became completely distorted, perhaps this is because the absolute positioning. I am showing some of the screenshots:
in resized firefox:
现在它表现得如我所愿，但如果我调整浏览器的大小，它变得完全扭曲，也许这是因为绝对定位。我正在展示一些屏幕截图：在调整大小的 Firefox 中：
in resized chrome:
在调整大小的铬：
in resized ie:
在调整大小即：
in maximized window it is:
在最大化窗口中它是：
Is there any way to solve this problem and achieve this centered alignment using relative positioning?
有什么方法可以解决这个问题并使用相对定位实现这种居中对齐？
Thanks.
谢谢。
Edit:
编辑：
In firefox no scrollbar appears while resizing but it appears in other browsers.
在 Firefox 中，调整大小时不会出现滚动条，但它会出现在其他浏览器中。
回答by StilgarBF
Try this:
尝试这个：
.loginDiv {
position: absolute;
left: 50%;
top: 50%;
text-align: center;
background-image: url('Images/loginBox.png');
width:546px;
height:265px;
margin-left: -273px; /*half width*/
margin-top: -132px; /*half height*/
}
You move it to the center, and than back left and up by half the dimensions - that will center it even on resize
您将其移动到中心，然后向左和向上移动一半的尺寸 - 即使在调整大小时也会将其居中
回答by Josh Valdivieso
Make a div that is for the content of the page and make a "content" class with the following css. This worked for me on Jquery Mobile with Phonegap for Android devices. Hope it helps someone.
制作一个用于页面内容的 div 并使用以下 css 创建一个“内容”类。这对我在 Jquery Mobile 和适用于 Android 设备的 Phonegap 上有用。希望它可以帮助某人。
CSS
CSS
.content {
width: 100%;
height: 100%;
top: 25%;
left: 25%;
right: 25%;
text-align: center;
position: fixed;
}
回答by Greg
#div {
height: 200px;
width: 100px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -50px;
}
This is a common method to center a div. You position it absolutely, then move it half way across and half way down. Then adjust the position with margins by half the dimensions of the div you are positioning.
这是使 div 居中的常用方法。您绝对定位它，然后将其移动一半并向下移动。然后将边距位置调整为您定位的 div 尺寸的一半。
For reference (this uses fixed positioning though to keep the div in place even when scrolling, helpful when doing modal popups.. http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
供参考（这使用固定定位，即使在滚动时也能保持 div 到位，在进行模态弹出窗口时很有帮助.. http://css-tricks.com/quick-css-trick-how-to-center-an-object -正好在中心/
