我想在页面的body
的水平中心和垂直中间对齐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中:
调整大小,即:
在最大化窗口中为:
有什么方法可以解决这个问题,并通过相对定位来实现这种居中对齐?
谢谢。
编辑:
在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*/
}
您将它移到中心,然后向左和向后上移一半尺寸,即使在调整大小时也可以使它居中
为页面内容创建一个div,并使用以下CSS创建“ content”类。这对于使用Android设备的Phonegap在Jquery Mobile上为我工作。希望它能对某人有所帮助。
CSS
.content {
width: 100%;
height: 100%;
top: 25%;
left: 25%;
right: 25%;
text-align: center;
position: fixed;
}
#div {
height: 200px;
width: 100px;
position:absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -50px;
}
这是将div居中的常见方法。您将其放置在绝对位置,然后将其移至一半,再向下一半。然后,将边距的位置调整为所定位div尺寸的一半。
供参考(尽管滚动时仍将div保持在固定位置,但使用固定位置,在进行模式弹出窗口时很有用。http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/