垂直居中的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的頂部和左側值將其設置在正確的位置。