在嵌套的css中垂直和水平对齐内容

Question

好的，我知道这是一个老问题，Stackoverflow上有一些答案，但似乎没有一个解决我的问题，或者我不适合理解所提供的答案。

我想在蓝图CSS的帮助下水平和垂直居中创建的页面上的一个div的内容对齐，如下图所示，我无法弄清楚如何。我测试的大多数变体使用某种绝对定位，所有div最终都在屏幕中间。

Answer 1

尝试将这些样式应用于文本应居中的div

.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中工作，这在制作列和行时是理想的。另外，使用display-table＆amp;放置div。在具有绝对位置的div中的vertical-align组合可能会很难，因为你可能无法在不知道大小（可能取决于视口）的情况下使内部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