CSS 'top' 没有将元素向下推到屏幕上

Question

我试图（几乎）将容器在屏幕上垂直居中。为此，我将其定位为 relative 并使用 top: 40%; 和 transform: translateY(-50%);.

的组合

问题是，top 不起作用（因为没有将容器向下推到页面中），尽管如果我检查 Firebug 或 Chrome 中的元素，我可以看到容器顶部已经添加了相当于40%的内容。如果我简单地单击该值并按回车键，更改就会反映在页面上。

所以我的问题是，即使 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>

这是显示问题的屏幕截图

Answer 1

这个 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' 没有将元素向下推到屏幕上

CSS 'top' not pushing element down the screen

css

position

这是我的 CSS -

下面是 HTML 的渲染方式

这是显示问题的屏幕截图