CSSは垂直中央を実現する5中方法

CSSを利用してオブジェクトの垂直中央を実現するには多くの異なる方法があり,その正しい方法を選択するのは難しい.私が見た良い方法とどのように良い中央ウェブサイトを作成するかを説明します.

方法1

この方法はいくつかのdivの表示方法をテーブルに設定するので、テーブルのvertical-align propertyプロパティを使用することができます.

<div id="wrapper">
<div id="cell">
<div class="content">
        Content goes here</div>
</div>
</div>
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

利点:contentは高さを動的に変更できます(CSSで定義する必要はありません).wrapperに十分なスペースがない場合、contentは遮断されません.
欠点:Internet Explorer(甚だしきに至ってはIE 8 beta)では無効で、多くのネストされたラベル

方法2:

この方法は絶対位置決めdivを用いて,そのtopを50%,top marginを負のcontent高さに設定した.これは、オブジェクトがCSSで一定の高さを指定しなければならないことを意味します.
固定高さがあるので、contentにoverflow:autoを指定したいかもしれません.contentが多すぎると、contentが溢れないようにスクロールバーが表示されます.

<div class="content">
    Content goes here</div>
#content {
    position:absolute;
    top:50%;
    height:240px;
    margin-top:-120px; /* negative half of the height */
}

利点:すべてのブラウザでネストされたラベルを必要としない場合に適用
欠点:十分なスペースがない場合、contentは消えます(divがbody内にあるように、ユーザーがブラウザウィンドウを縮小し、スクロールバーが現れない場合)

方法3

この方法ではcontent要素の外にdivを挿入します.このdiv height:50%を設定します.margin-bottom:-contentheight;. contentはフローティングをクリアし、真ん中に表示します.

<div id="floater"></div>
<div id="content">
    Content here
</div>
#floater    {float:left; height:50%; margin-bottom:-120px;}
#content    {clear:both; height:240px; position:relative;}

利点:すべてのブラウザに十分なスペースがない場合(たとえば、ウィンドウの縮小)contentは切断されず、スクロールバーが表示されます.
欠点:唯一私が考えることができるのは追加の空の要素が必要です

方法四

この方法はposition:absoluteを用い,固定幅と高さのdivを有する.このdivはtop:0に設定されている.bottom:0;.しかし、固定高さがあるため、上下との間隔が0ではないため、margin:auto;中央に配置されます.margin:autoを使用するブロックレベル要素を垂直に中央に配置するのは簡単です.

<div id="content">
    Content here</div>
#content {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    height:240px;
    width:70%;
}

メリット:シンプル
欠点:IE(IE 8 beta)の中で無効で十分な空間がない時、contentは切断されて、しかしスクロールバーが現れることはありません

方法5

この方法では、単行テキストのみをセットアップできます.line-heightをそのオブジェクトのheight値に簡単に設定するだけでテキストを中心にすることができます.

<div id="content">
    Content here</div>
#content {height:100px; line-height:100px;}

利点:すべてのブラウザで十分なスペースがない場合に切断されない場合に適用
欠点:テキストのみ有効(ブロックレベル要素が無効)複数行の場合、ブレークワードは悪い
この方法は、ボタンテキストや単行テキストを中心にするなど、小さな要素で非常に役立ちます.

どの方法ですか。

私が一番好きなのは方法3で、欠点は多くありません.contentはフローティングをクリアするので、その上に別の要素を配置することができ、ウィンドウをスケールすると、中央のcontentは別の要素を隠すことはありません.

<div id="top">
<h1>Title</h1>
</div>
<div id="content">
    Content Here</div>

#floater    {float:left; height:50%; margin-bottom:-120px;}
#top        {float:right; width:100%; text-align:center;}
#content    {clear:both; height:240px; position:relative;}