複数のdivを親div内に垂直に中央に配置

Question

親要素内に一連の要素があります。親要素の高さは変更可能です（いくつかのjQueryファイルによって変更されます）。ここでは、レイアウトがどのように見えるかです：

<div class = "parent"> 
    <div class="child1"> 
    </div> 
    <div class="child2"> 
    </div> 
</div> 

私は子要素は、親のdivの中央に整列終わるしたいが、私はそうするために、CSSの記述方法を見つけ出すことはできません。私は次のようなことを書こうとしました：

.child1 { 
     ... 
     vertical-align: middle; 
} 

これはうまくいきません。私も試しました：

.parent { 
     display:table; 
} 
.child1 { 
     display:table-cell; 
     vertical-align:middle; 
} 

これも機能しません。どのようにこれを行うにはどのようなアイデア？

Answer 1

チェックこのリンク：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

これは、コンテナの50％にあなたの子供のdiv要素のトップをもたらすでしょう。 margin-topを追加するだけです： - （x）px;ここで（x）は子供のdivの高さの半分です。

Answer 2

これはあなたの標準よりも少し複雑です「私は、垂直親コンテナ内の単一のdivを揃えるんか。」

垂直方向に並べ替える必要がある子要素の数が（変更可能）ある場合、または親コンテナの高さが変更された場合は、Javsacript/JQueryを使用して位置を設定する必要があります。 CSSを利用して親コンテナ内の複数の子要素に真ん中の垂直方向の配置を適用する「標準的な」方法です。 編集：私は間違って証明されてきた、あなたは明らかに使用してすることができます：あなたはそれを回避ハッキングしない限り、擬似要素の前に、それはIE7で動作しません。

私はバイオリンでこれを実装しました：http://jsfiddle.net/rJJah/20/

キーパーツ

1. 各子要素がposition:relativeを持っています。特定の子要素の高さが可変である可能性があるため、これは重要です。これにより、それぞれの上位位置を個別に計算する必要がなくなります。
2. あなたが親コンテナの高さを変更毎回、あなたは高さの計算を再実行する必要があり、それぞれの子にオフセットトップを設定します。

あなたがあなたの代わりにそのように中心ます容器の内部中央に望む要素のためのラッパーを作成することができます

Answer 3

：次に

HTML

<div class ="parent"> 
    <div class="centerme"> 
     <div class="child1"> 
      .... 
     </div> 
     <div class="child2"> 
      .... 
     </div> 
     </div> 
</div> 

あなただけでこれを行うことができます。

css

.block:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
} 

Demo。方法はCSS-tricksにあります。

Answer 4

あなたがそうのように、child1の上とchild2の上に同じスタイルを適用するのを忘れている：ここで

.child1, .child2 { 
    display:table-cell; 
    vertical-align:middle; 
} 

はjsfiddleです：あなたの入力のための http://jsfiddle.net/D853q/1/