ビューポートの100％であるdiv内の変数heightを使用してdivを垂直に中心にします

何度も尋ねられた質問のように見えますが、その特定の状況に対する解決策を見つけることができませんでした。ビューポートの100％であるdiv内の変数heightを使用してdivを垂直に中心にします

は、ここに私のレイアウトの基本的なワイヤーフレームです：

enter image description here

は基本的に、私は100％の幅とブラウザウィンドウの100％の高さを取る異なる背景を持ついくつかのdivを持っています。それぞれの中には、その親の50％の幅を持つが、内容に応じて可変の高さを持つ別のdivがあります。

divs-within-a-divのすべてを垂直に整列させたいと思います。今、私はディスプレイを置くことを読んだ：table-cellとparentのvertical-align：middleはうまくいくはずだが、この場合はちょっと混乱するようだ。： -/

マイコード：あなたの助けを

<head> 
<style> 
    html, body { 
      height: 100%; 
     } 
     body > div { 
      width: 100%; 
      height: 100%; 
      background-size: cover; 
     } 

     .centered { 
      width: 50%; 
      margin: 0 auto; 
      background: rgba(0,0,0,0.4); 
      padding: 50px 0 30px 0; 
     } 
</style> 
</head> 
     <body> 

      <div id="pic_1"> 
        <div class="centered">content</div> 
      </div> 

      <div id="pic_2"> 
        <div class="centered">content</div> 
      </div> 

      <div id="pic_3"> 
        <div class="centered">content</div> 
      </div> 

     </body>

ありがとう！

出典

2013-01-01 Tom S.

[div内に可変の高さを持つコンテンツを垂直に配置する方法は？]（http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height -within-a-div） – KatieK

祖父母要素をdisplay:table; height:100%、親要素をdisplay:table-cell; vertical-align:middleに設定します。

たとえば、「方法1」hereを参照してください。

_{また、マークアップshould not use class="centered";代わりにセマンティッククラス名を使用してください。}

出典

2013-01-01 20:02:53 Phrogz

あなたの答えをありがとう！親が1人しかいないときは本当にうまくいく。この場合、＃pic_1、＃pic_2、および＃pic_3のdivは3列レイアウトでアセンブルされており、それぞれがブラウザの幅の33％を占めているようです。幅を100％に設定しようとしましたが、動作しませんでした。まだ3列のレイアウトになっていました。今回は＃pic_1の幅が66％、他の2つが残っていたことが分かりました。： -/ –

3つを縦に積み重ねる場合は、3つのテーブル（3つの祖父母要素）がそれぞれ 'height：100％'でなければなりません。 – Phrogz

ビューポートの100％であるdiv内の変数heightを使用してdivを垂直に中心にします

答えて

関連する問題