Question

我想在页面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： enter image description here

调整大小的chrome： enter image description here

在调整大小时： enter image description here

在最大化窗口中它是： enter image description here

有没有办法解决这个问题并使用相对定位实现这个居中对齐？

感谢。

编辑：

在firefox中，调整大小时没有滚动条，但它出现在其他浏览器中。 enter image description here

Answer 1

试试这个：

.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*/
}

你将它移动到中心，而不是向左和向后移动一半尺寸 - 即使在调整大小时它也会居中

Answer 2

创建一个用于页面内容的div，并使用以下css创建“content”类。这适用于Jquery Mobile和Android设备的Phonegap。希望它可以帮到某人。

CSS

.content {

        width: 100%;
        height: 100%;
        top: 25%;
        left: 25%
        right: 25%;
        text-align: center;
        position: fixed;
}

Answer 3

#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/

Div水平中心和垂直中间

3 个答案: