Html 具有动态高度和100%宽度的垂直中心div

可能重复：

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

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

---

其中登录注册具有100%宽度和动态高度

简短回答：您不能

---

长答案：如果你知道高度，你可以使用固定定位，一个

顶部：50%

和一个

边距顶部

等于高度的负一半。除此之外，您可以使用一些基本的JS来计算

边距顶部

应基于

远视

的值。如果您在另一个元素（而不是窗口）中垂直居中，则可以执行相同的操作，但前提是容器不是静态定位的。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'); 
});​

示例文本
​
.登录注册页面{
位置：绝对位置；
左：0；
排名：0；
身高：100%；
宽度：100%；
背景：灰色；
}
.登录注册{
宽度：100%；
背景：白色；
位置：绝对位置；
最高：50%；
}
​
$（文档）.ready（函数（）{
$（'.login-signup'）.css（'margin-top'，-$（'.login-signup'）.outerHeight（）+'px'）；
});​

---

您需要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
});

请参阅或直接转到下面的代码：

HTML

---

注意：在不支持

translate（）

的浏览器中，内容将显示在页面顶部（如果使用了

top:50%；

），而不是被切断）。

该用户说的是实话。此外，根据个人经验，50像素到150像素的机顶盒通常比垂直居中的机顶盒看起来要好得多。原因是，通常情况下，眼睛会从页面顶部向下扫描，因此顶部的大边距比底部的大边距对用户的影响要大得多。@RyanKinal-非常正确。如果你想这样做，这是可能的，但在我看来，不是一个非常聪明的设计选择。而且，请注意，如果内容比窗口长，你可能会丢失一些内容以溢出。你可能想考虑<代码> OutHeHead（）/<代码>，而不是<代码> Head（）/<代码>。考虑到填充和边框。我可以问一下，当你可以在它前面拍一个

-

的时候，用高度乘以

-1

的原因是什么吗？@Kolink，只是我们读写的方式不同而已；）这两种方法都有效，不是吗？我想我只是不喜欢看到两个这样的操作符并排出现。当然，

*-1

没有问题，只是个人喜好。少了两个字节：pPublicate:

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