logo标签列表

水平居中和垂直居中的Div

htmlcssvertical-alignmentalignment
18

我想要将一个 div 水平居中并垂直居中在页面的 body 中。

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 中，调整大小时不会出现滚动条，但在其他浏览器中会出现。 进入图像描述
3个回答
20

试试这个：

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

你将它移动到中心，然后向左上方移动一半的尺寸 - 这样调整大小后它仍将保持在中心

感谢您的帮助。现在它可以工作了，但是在Firefox浏览器中调整大小时没有滚动条，而在其他浏览器中有。我已经更新了我的问题，请看一下。 - Tapas Bose
如果您不想要滚动条 - 只需将 overflow:hidden 添加到 body。 - StilgarBF
我想要滚动条，所以我在body中设置了overflow: auto，但是仍然没有出现如图所示的滚动条。 - Tapas Bose
如果你想要一个滚动条，你需要添加 overflow:scroll;。最好能够实时查看效果，可以设置一个虚拟页面。如果页面变得太窄，你可能需要添加一个媒体查询来为较小的设备设置特殊样式。PS - 如果我的答案解决了你的问题，我会感激你的点赞。- 想要超过15分 ;-) - StilgarBF
谢谢你的帮助。但是当浏览器大小变小时，页面主体的滚动条无法正常工作。我已经接受了你的答案，因为它解决了我的最初问题。我已经开始了另一个线程来讨论第二个问题。 - Tapas Bose
7

创建一个div用于页面内容，并使用以下CSS创建“content”类。这对我在使用Jquery Mobile和Phonegap开发Android设备时非常有效。希望能对其他人有所帮助。

CSS

.content {
    width: 100%;
    height: 100%;
    top: 25%;
    left: 25%;
    right: 25%;
    text-align: center;
    position: fixed;
}
1
left: 25% is missing a ; - keanu_reeves
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/
谢谢帮忙。现在它可以工作了，但是在Firefox中调整大小时没有滚动条，而在其他浏览器中有。我已经更新了我的问题，请看一下。 - Tapas Bose
这个链接 http://jsfiddle.net/mAVd6/2/ 基本上反映了你的页面是如何构建的？它在Firefox和其他浏览器中会产生滚动条吗？如果你将absolute替换为fixed，滚动条会发生什么变化？！ - Greg
如果我将位置从absolute改为fixed，那么在任何浏览器中都不会出现滚动条。 - Tapas Bose
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接