Div水平居中，垂直居中[重复]

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中： “在此处输入图像描述”

在调整尺寸的Chrome中： “在此处输入图像描述”

调整大小，即： “在此处输入图像描述”

在最大化窗口中为： “在此处输入图像描述”

有什么方法可以解决这个问题，并通过相对定位来实现这种居中对齐？

谢谢。

编辑：

在firefox中，调整大小时没有滚动条出现，但在其他浏览器中出现。 “在此处输入图像描述”

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”类。这对于使用Android设备的Phonegap在Jquery Mobile上为我工作。希望它能对某人有所帮助。

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水平居中，垂直居中[重复]

问题描述投票：17回答：3

3个回答

最新问题

Div水平居中，垂直居中[重复]

问题描述 投票：17回答：3

3个回答

最新问题

问题描述投票：17回答：3