我正在尝试(几乎)将容器在屏幕上垂直居中。为此，我将其定位为 relative并使用 top: 40%; 的组合和transform: translateY(-50%); .
问题是，top不起作用(就像不将容器推到页面下一样)，尽管如果我检查 Firebug 或 Chrome 中的元素，我可以看到相当于 40% 的内容已添加到容器的顶部。如果我只需单击该值并按 Enter 键，更改就会反射(reflect)在页面上。
所以我的问题是，为什么这不起作用，即使 top看来计算正确？
这是我的 CSS -
body:not(.mobile) #login{
padding: 0 0 40px;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#login{
position: relative;
z-index: 10;
}
这是 HTML 的呈现方式
<body class="login login-action-login wp-core-ui locale-en-gb">
<div id="login">
{ Login form goes here }
</div>
<div class="clear"></div>
</body>
这是显示问题的屏幕截图
最佳答案
这个 CSS 将修复它:
body:not(.mobile) #login{
padding: 0 0 40px;
top: 40%;
}
#login{
position: absolute;
z-index: 10;
}
编辑:您可以看到它在这个 js fiddle 上运行:https://jsfiddle.net/7h0nz7nz/
关于CSS 'top' 未将元素向下推到屏幕上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33808805/