Question

代码：

#wrapper_login {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background: black;
}

#login {
    z-index: 22;
    width: 300px;
    height: 400px;
    margin: -200px auto 0 auto;
    background: #000;
}

定心工作正常！问题是：如果窗口高度低于400px，则应该可以看到完整的#login并且可以滚动。目前滚动条是可见的，但是无法看到完整的#login，滚动条只是不包含整个#login。

我认为这是因为位置绝对和负边缘 - 顶部，我也不知道如何改进代码，所以它以它应该的方式工作。

提前感谢您的帮助！

Answer 1

#wrapper_login的父容器应该具有相对位置。和子容器#login绝对的位置，以便在不同的决议中无缝地工作。您可以使用#login的顶部和左侧值将其设置在正确的位置。

Answer 2

看起来像媒体查询的工作

@media screen and (max-height: 400px) {
 #wrapper_login { position: static; }
 #login { margin: 0 auto; }
}

http://jsfiddle.net/95u9Q/2/

垂直定心css

2 个答案: