垂直居中的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; 
} 

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

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

在此先感谢您的帮助！

Answer 1

看起来像一个工作，一个媒体查询

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

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

Answer 2

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