0

可能重复：
如何在动态高 div 中垂直居中文本？

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

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

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

4

4 回答 4

1

简短的回答：你不能。

长答案：如果你知道高度，你可以使用固定定位，atop:50%和 amargin-top等于负的一半高度。除此之外，您可以使用一些基本的 JS 来计算margin-top应该基于offsetHeight. 如果您在另一个元素而不是窗口中垂直居中，则可以执行相同操作，但使用绝对位置，前提是容器不是静态定位的。

于 2012-06-12T19:15:58.883 回答
0

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

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%;而是被使用了）。

于 2012-06-12T19:50:27.933 回答
0

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'); 
});​

演示

于 2012-06-12T19:22:16.257 回答
-2

您需要 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
});
于 2012-06-12T19:24:02.170 回答