html - 動的な高さと100％の幅を持つ垂直方向の中央のdiv

Question

重複の可能性：
動的に高いdivでテキストを垂直方向に中央揃えするにはどうすればよいですか？

ブラウザウィンドウで動的な高さと100％の幅でdivを垂直方向に中央に配置するにはどうすればよいですか？

<div class="login-signup-page">
<div class="login-signup"></div>
</div>

ここで、login-signupの幅と動的な高さは100％です。

Answer 1

簡単な答え：できません。

長い答え：高さがわかっている場合は、固定位置を使用できます。aとtop:50%高margin-topさの負の半分に等しい値です。それが足りない場合は、いくつかの基本的なJSを使用して、margin-topに基づいて何をすべきかを計算できますoffsetHeight。ウィンドウではなく別の要素の垂直方向の中央に配置している場合は、同じことができますが、コンテナが静的に配置されていない場合は絶対位置を使用します。

Answer 2

Kolinkは確かに正しいですが、それほど手間はかかりません。必要なのは、それを機能させるための巧妙なCSSとJavaScript（以下の例ではjQueryを使用）だけです。

<div class="login-signup-page">
<div class="login-signup">Sample Text</div>
</div>​

.login-signup-page {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    background:grey;
}

.login-signup {
    width:100%;
    background:white;
    position:absolute;
    top:50%;
}
​

$(document).ready(function() {
   $('.login-signup').css('margin-top', -$('.login-signup').outerHeight() + 'px'); 
});​

デモ

Answer 3

jsFiddleの例を参照するか、以下のコードに直接進んでください。

HTML

<div class="login-signup-page">
<div class="login-signup"></div>
</div>

CSS

.login-signup-page {

 /* Position at top of page */
 position:fixed;
 top:0;

 /* Position halfway down page (in supporting browsers) */
 -moz-transform:translate(0, 50%);
 -webkit-transform:translate(0, 50%);
 -ms-transform:translate(0, 50%);
 -o-transform:translate(0, 50%);
 transform:translate(0, 50%);

 /* Prevent hidden content */
 height:100%;
 width:100%;

}

.login-signup {

 /* Prevent hidden content */
 max-height:100%;
 max-width:100%;
 overflow:auto;

 /* Position in center of page (in supporting browsers) */
 -moz-transform:translate(0, -50%);
 -webkit-transform:translate(0, -50%);
 -ms-transform:translate(0, -50%);
 -o-transform:translate(0, -50%);
 transform:translate(0, -50%);

}

注：をサポートしていないブラウザではtranslate()、コンテンツはページの上部に表示されます（切り取られるのではなく、top:50%;代わりに使用されていました）。

Answer 4

要素とブラウザウィンドウの高さを取得し、それらの数値に基づいて計算するには、JavascriptまたはjQueryが必要です。このようなもの：

$(document).ready(function() {
    var signupHeight = $('.login-signup').height(); // height of your dynamic element
    var winHeight = $(window).height(); // height of the browser window
    $('.login-signup').css('margin-top',(winHeight - signupHeight) / 2); // subtract one height from the other, then divide by 2 so the top and bottom margins are equal
});