当一些div嵌套时，Verticaly居中等高的列？

Question

我需要相等高度的列，它们垂直居中于那里。当每个列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>

Answer 1

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;