在可視高度的div內垂直居中顯示可變高度的div

我知道這看起來像是一個多次提問的問題，但我無法找到解決該特定情況的解決方案。在可視高度的div內垂直居中顯示可變高度的div

這裏是我的佈局基本線框：

enter image description here

基本上，我有幾個的div是採取100％的寬度和瀏覽器窗口的100％的高度不同的背景。在他們的每一箇中，都是另一個div，它的父母的寬度爲50％，但是根據其內容，其高度可變。

我希望所有這些divs-a-div都能垂直對齊。現在，我已經讀過，在父項中放置一個顯示器：table-cell和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

感謝您的回答！當只有一個父母時，它確實工作得很好。但是，在這種情況下，div＃pic_1，＃pic_2和＃pic_3似乎以3列布局組裝，每個佔用瀏覽器寬度的33％。我嘗試將寬度設置爲100％，但不起作用：它們仍處於3列布局。只有這一次，＃pic_1似乎佔用了66％的寬度，另外兩個分享了剩下的內容。： -/ –

如果你想讓它們中的三個垂直堆疊，那麼你需要三個表格（三個祖父母元素），每個表格都有'height：100％'。 – Phrogz

在可視高度的div內垂直居中顯示可變高度的div

回答

相關問題