参见英文答案 >
Best way to center a <div> on a page vertically and horizontally?21个
我想对齐一个div的水平中心和垂直中间的一个页面的正文.
我想对齐一个div的水平中心和垂直中间的一个页面的正文.
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;
}
我有这个html：
<body class="loginBody">
<form id="form1">
<div class="loginDiv">
</div>
</form>
</body>
现在它的行为就像我想要的那样,但如果我调整浏览器的大小,它就会完全扭曲,也许这是因为绝对的定位.我正在展示一些截图：
在调整大小的Firefox中：
在调整大小的chrome中：
调整大小ie：
在最大化的窗口是：
有没有办法解决这个问题,使用相对定位来实现这个对中的对齐？
谢谢.
编辑：
在Firefox中,调整大小时不会出现滚动条,但会出现在其他浏览器中.
解决方法
尝试这个：
.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*/
}
您将其移动到中心,而不是向左和向上延伸一半的尺寸 – 即使在调整大小时也会使它居中
