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

センタリングは正常に機能します！問題は次のとおりです。ウィンドウの高さが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/