DIV水平居中和垂直方向的中间 [英] Div horizontally center and vertically middle
问题描述
我要对齐一个DIV水平居中,并在页面的体
垂直中间。
I want to align a div horizontally center and vertically middle of the body
of a page.
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;
}
和我有这个网站:
<body class="loginBody">
<form id="form1">
<div class="loginDiv">
</div>
</form>
</body>
现在则表现为我想它,但如果我调整浏览器,它成为完全扭曲的,这也许是因为绝对定位。我展示了一些截图: 在调整大小后的Firefox中:
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:
在调整浏览器:
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?
感谢。
编辑:
在Firefox中,而调整没有滚动条出现,但它出现在其他浏览器。
In firefox no scrollbar appears while resizing but it appears in other browsers.
推荐答案
试试这个:
.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
这篇关于DIV水平居中和垂直方向的中间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!