垂直和水平對齊嵌套的CSS中的內容

Question

好吧，我知道這是一個老問題，在Stackoverflow上有一些答案，但似乎沒有包含解決方案，或者我不適合理解答案提供。

我想要在Blueprint CSS的幫助下創建的頁面上對齊一個div的內容，水平和垂直居中，如下圖所示，我無法弄清楚如何。我測試的大多數變體都使用某種絕對定位，所有div最終都在屏幕中間。

Answer 1

嘗試應用這些樣式，其中文本應居中

.mydiv{ 
display: table-cell; 
vertical-align: middle; 
text-align: center; 
} 

Answer 2

我想提出一個替代解決方案的股利，使用這個CSS的定位：

.alignh { 
    display: table; 
    margin: 0 auto; 
    height: 100%; 
} 

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

它需要額外的標記，例如：

<div class="alignh"> 
    <div class="alignv"> 
    <p>I want to be centered horizontally and vertically</p> 
    </div> 
</div> 

它爲什麼會有用？因爲display:table-cell和vertical-align: middle不能在具有position:absolute的div中工作，這在製作列和行時是可取的。此外，將一個div與display-table & vertical-align組合在一個具有絕對位置的div內部可能會很費力，因爲您可能無法使內部div在不知道大小的情況下填充整個外部div（這可能取決於視口） 。

---

的完整代碼...

HTML：

<div class="left col"> 
    <p>I want to be left aligned</p> 
    <p>Me too</p> 
    <p>More text</p> 
</div> 
<div class="right col"> 
    <div class="top row"> 
    <div class="alignh"> 
     <div class="alignv"> 
     <p>I want to be centered horizontally and vertically</p> 
     </div> 
    </div> 
    </div> 
    <div class="bottom row"> 
    <p>Just some more text...</p> 
    </div> 
</div> 

CSS：

.col { 
    top: 0; 
    bottom: 0; 
} 

.row { 
    left: 0; 
    right: 0; 
} 

.row, .col { 
    overflow: hidden; 
    position: absolute; 
    border: 1px solid black; 
} 

.left.col { 
    left: 0; 
    width: 250px; 
} 

.right.col { 
    left: 250px; 
    right: 0; 
} 

.top.row { 
    top: 0; 
    height: 100px; 
} 

.bottom.row { 
    top: 100px; 
    bottom: 0; 
} 

.alignh { 
    display: table; 
    margin: 0 auto; 
    height: 100%; 
} 

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

See at Codepen。