html - 使用其子元素对齐元素

Question

HTML 结构如下:

<div id="c1">
  <div id="c2">
    <div id="d1"></div>
    <div id="d2"></div>
  </div>
</div>

我希望#c2 在#c1 内垂直对齐，使得#d2 在#c1 内垂直居中。这是澄清图片:

如果它只能在最新的 Chrome 中运行就可以了。谢谢。

UPD:#d1 和#d2 的高度不固定。 #d1 和#d2 之间的距离是固定的。

UPD2:你可以忘掉#c2。我希望#d1 和#d2 依次放置，#d2 位于#c1 的中心。

Answer 1

在父 div 上使用 display:table-cell 和 vertical-align:middle

#c1{
    display:table-cell;
    border:red solid 1px;
    width:600px;
    height:300px;
     vertical-align:middle;
    text-align:center
}
#c2{
    border:green solid 1px;
    width:300px;
    margin:0 auto

}

DEMO