垂直和水平对齐嵌套的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。