css - 垂直居中css

Question

给出的代码：

http://jsfiddle.net/95u9Q/

#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;
}

居中工作正常！问题是：如果窗口高度低于 400 像素，则完整的 #login 应该是可见且可滚动的。当前滚动条可见，但看不到完整的#login，滚动条只是不包含整个#login。

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

在此先感谢您的帮助！

Answer 1

Your parent container that is #wrapper_login should have a relative position instead. and the child container #login the position of absolute for this to work seamless across different Resolutions. You could use top and left values for #login to set it at the right postion.

Answer 2

Looks like a job for a media query

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

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