CSS 'top‘不将元素推到屏幕上

Question

我正试图(几乎)在屏幕上竖直地对一个容器进行居中。为此，我将其定位为relative，并使用top: 40%;和transform: translateY(-50%);的组合。

问题是，top没有工作(比如没有将容器按下页面)，尽管如果我检查Firebug或Chrome中的元素，我可以看到容器顶部添加了相当于40%的元素。如果我只需单击该值并按enter键，则更改将反映在页面上。

所以我的问题是，尽管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小提琴：https://jsfiddle.net/7h0nz7nz/上工作。