Question

可能重复：
How can I vertically center text in a dynamically high div?

如何在浏览器窗口中以动态高度和100％宽度垂直居中div？

<div class="login-signup-page">
<div class="login-signup"></div>
</div>

其中login-signup具有100％的宽度和动态高度

Answer 1

简短的回答：你不能。

答案很长：如果您知道高度，可以使用固定定位，top:50%和margin-top等于负半高。除此之外，您可以使用一些基本的JS来计算基于margin-top的{{1}}应该是什么。如果你垂直居中于另一个元素而不是窗口，你可以做同样的事情，但如果容器没有静态定位，那么绝对位置。

Answer 2

Kolink确实是正确的，但它并不需要太多工作。所需要的只是一些聪明的CSS和JavaScript（我在下面的例子中使用了jQuery）来使它工作。

<div class="login-signup-page">
<div class="login-signup">Sample Text</div>
</div>

.login-signup-page {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background:grey;
}

.login-signup {
    width:100%;
    background:white;
    position:absolute;
    top:50%;
}


$(document).ready(function() {
   $('.login-signup').css('margin-top', -$('.login-signup').outerHeight() + 'px'); 
});

Demo

Answer 3

请参阅jsFiddle example或直接查看以下代码：

HTML

<div class="login-signup-page">
<div class="login-signup"></div>
</div>

CSS

.login-signup-page {

 /* Position at top of page */
 position:fixed;
 top:0;

 /* Position halfway down page (in supporting browsers) */
 -moz-transform:translate(0, 50%);
 -webkit-transform:translate(0, 50%);
 -ms-transform:translate(0, 50%);
 -o-transform:translate(0, 50%);
 transform:translate(0, 50%);

 /* Prevent hidden content */
 height:100%;
 width:100%;

}

.login-signup {

 /* Prevent hidden content */
 max-height:100%;
 max-width:100%;
 overflow:auto;

 /* Position in center of page (in supporting browsers) */
 -moz-transform:translate(0, -50%);
 -webkit-transform:translate(0, -50%);
 -ms-transform:translate(0, -50%);
 -o-transform:translate(0, -50%);
 transform:translate(0, -50%);

}

注意：在不支持translate()的浏览器中，内容会显示在页面顶部（而不是被切断，有top:50%;已经被使用了。）

Answer 4

您需要使用Javascript或jQuery来获取元素和浏览器窗口的高度，然后根据这些数字进行计算。像这样：

$(document).ready(function() {
    var signupHeight = $('.login-signup').height(); // height of your dynamic element
    var winHeight = $(window).height(); // height of the browser window
    $('.login-signup').css('margin-top',(winHeight - signupHeight) / 2); // subtract one height from the other, then divide by 2 so the top and bottom margins are equal
});

垂直居中的div具有动态高度和100％宽度

4 个答案:

HTML

CSS