嵌套某些div时垂直居中的等高列？

【问题标题】：Verticaly centered equal height columns when some divs are nested?嵌套某些div时垂直居中的等高列？
【发布时间】：2016-07-14 00:51:26
【问题描述】：

我需要垂直居中内容的等高列。当每个列 div 是容器的直接后代时，这很容易用显示表来完成：http://codepen.io/anon/pen/XKzOrv

但是我有嵌套的 div。是否仍然可以在不修改我的标记的情况下实现此布局？

更新 - 因为我支持 IE9+，所以我不能使用 flexbox。

.cont {
  width: 500px;
}
.depth1 {
  width: 50%;
  float: left;
  display: table;
}
.depth2 {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
}
.a {
  background: blue;
}
.b {
  background: green;
}
.c {
  background: orange;
}
.d {
  background: grey;
}

<div class="cont">
  <div class="depth1">
    <div class="depth2 a">
      A
    </div>
    <div class="depth2 b">
      B
      <br>Wrap
    </div>
  </div>
  <div class="depth1">
    <div class="depth2 c">
      C
      <br>
      <br>
      <br>Wrap
    </div>
    <div class="depth2 d">
      D
    </div>
  </div>
</div>

【问题讨论】：

@j08691 是的，我已经更新了我的问题。

标签： css

【解决方案1】：

是的，Flexbox 是可能的，只需在除 .c 之外的所有子 div 元素上使用 display: flex 并在 .depth2 上添加 align-items: center

.cont {
  width: 500px;
  display: flex;
}
.depth1 {
  width: 50%;
  display: flex;
}
.depth2 {
  width: 50%;
}
.depth2:not(.c) {
  display: flex;
  align-items: center;
}
.a {
  background: blue;
}
.b {
  background: green;
}
.c {
  background: orange;
}
.d {
  background: grey;
}

<div class="cont">
  <div class="depth1">
    <div class="depth2 a">
      A
    </div>
    <div class="depth2 b">
      B
      <br>Wrap
    </div>
  </div>
  <div class="depth1">
    <div class="depth2 c">
      C
      <br>
      <br>
      <br>Wrap
    </div>
    <div class="depth2 d">
      D
    </div>
  </div>
</div>

【讨论】：