divを垂直に中央に配置するにはどうすればよいですか？

Question

私は水平と垂直を中心にしたいdivを持っています。

水平の問題ではすべてが素晴らしいですが、垂直方向の配置に問題があります。

#parent { 
    display: table; 
} 

#child { 
    display: table-row; 
    vertical-align: middle; 
} 

が、これは動作しません：

は、私はこれを試してみました。

Answer 1

transform（またはそのベンダーのプレフィックスバージョン）をサポートするブラウザのみをサポートする必要がある場合は、この1つの古いトリックを使用して要素を垂直に整列させます。あなたは古いブラウザをサポートする必要がある場合

#child { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

、あなたはこれらの組み合わせを使用することができますが、彼らはtable対blockのレンダリングの違いに起因する痛みをすることができます。

#parent { 
    display: table; 
} 

#child { 
    display: table-cell; 
    vertical-align: middle; 
} 

あなたの高さが固定されており、あなたがそれらの本当に古い、厄介なブラウザをサポートする必要がある場合は...

#parent { 
    position: relative; 
} 

#child { 
    height: 100px; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
} 

あなたの高さが固定されていない場合は、workaroundあります。

See it on jsFiddle。

Answer 2

最初に、非テーブルマークアップをテーブルとして扱う（ディスプレイ：テーブルとフレンド）は、クロスブラウザではありません。私はあなたがサポートする必要があるブラウザを知っているが、確かにIE6はこれをしません。しかし、あなたの目標としているブラウザを行う場合すべてのサポートディスプレイ：テーブル私はあなたにいくつかのヒントを与えることができます。

（テーブルレイアウトを使用して）探している垂直センタリングのアプローチは、TDを垂直方向に配置することに依存します。中間、次に1つのブロック要素が垂直方向に中央に配置されます。

#parent { display:table-cell; vertical-align:middle; } 
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ } 

それは周囲のテーブル行とテーブルとテーブルセルを使用しても大丈夫ですが、ブラウザはあなたのために必要なテーブルラッピング要素を推測：だから私は何がしたいことはあると思います。ここ

Answer 3

あなたは、内側のdivのサイズまたは何を知っていないとき、あなたは「センタリング」を修正するためにここにある％を使用することができます別の方法です....

アイデアは、あなたの一番上の値であるということです

<div id="parent"> 
    <div id="child"> 
      hello 
    </div> 
</div> 

とスタイリングのために：

#parent { 
    position: relative; 
    height: 300px; 
    width:200px; 
    background-color:green; 
} 

#child { 
    height: 50%; 
    width: 50%; 
    position:relative; 
    top:25%; 
    left:25%; 
    background-color:red; 
} 

中心と錯覚

を作成するようにあなたの子供要素の半分の高さは、ここではコードです

ここでは、display: table-cellとしてdisplay:table、など親プロパティと子の特性を有する http://jsfiddle.net/Wabxv/

Answer 4

アクションでそれを見ることができるとvertical-align: middleは私のために働きました。