Fatal编程技术网
  • css/
  • CSS'；顶部'；不将元件推下屏幕

CSS'；顶部'；不将元件推下屏幕

css

CSS'；顶部'；不将元件推下屏幕,css,position,Css,Position,我试图（几乎）在屏幕上垂直居中放置一个容器。为此，我将其定位为relative，并使用top:40%的组合和转换：translateY（-50%） 问题是，top不起作用（就像没有将容器向下推到页面中一样），尽管如果我检查Firebug或Chrome中的元素，我可以看到容器顶部添加了相当于40%的元素。如果我只需单击该值并按enter键，更改将反映在页面上 所以我的问题是，为什么即使top的计算似乎是正确的，它仍然不起作用 这是我的CSS- 下面是HTML的呈现方式 {登录表单在这里} 下面

我试图（几乎）在屏幕上垂直居中放置一个容器。为此，我将其定位为
relative
，并使用
top:40%的组合和
转换：translateY（-50%）

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

所以我的问题是，为什么即使
top
的计算似乎是正确的，它仍然不起作用

这是我的CSS-
下面是HTML的呈现方式


{登录表单在这里}


下面是显示问题的屏幕截图
此CSS将修复此问题：


body:not(.mobile) #login{
    padding:            0 0 40px;
    top:                40%;
}
#login{
    position:   absolute;
    z-index:    10;
}



编辑：你可以看到它在这个js小提琴上工作：
你能发布你完成的代码或提供一个演示吗？干杯。我还必须使用
left:50%
和
transform:translate3d（-50%，-50%，0），但它现在显示为我想要的。

<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>



body:not(.mobile) #login{
    padding:            0 0 40px;
    top:                40%;
}
#login{
    position:   absolute;
    z-index:    10;
}