使用其子元素对齐元素

Question

HTML的结构如下：

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

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

如果它只适用于最新的Chrome，那就没关系了。感谢。

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

UPD2 ：你可以忘掉＃c2。我希望＃d1和＃d2一个接一个地放置，＃d2放在＃c1的中心。

Answer 1

HTML ：

<div id="c1" style="height:200px;width:250px;">
    <div id="c2" style="height:150px;width:210px;">
        <div id="d1" style="height:50px;width:100px;"></div>
        <div id="d2" style="height:50px;width:100px;"></div>
    </div>
</div>

<强> CSS ：

div{
    border:1px solid #ccc;
    padding:5px;
    margin:auto;
}

检查JSFiddle。

Answer 2

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

#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

Answer 3

所以最后我自己找到了解决方案。由于“-webkit- *”属性，它仅适用于Chrome，但我认为它可以很容易地用于任何现代浏览器。主要思想是使用变换，因为变换可以（通过使用百分比）引用元素本身的大小，而不是其父级的大小。 CSS看起来像：

div {
    border: 1px solid;
}

#c1 {
    height: 400px;
    width: 400px;
    display: -webkit-flex;
    -webkit-flex-flow: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

#c2 {
    width: 350px;
    position: relative;
}

#d1 {
    width: 200px;
    position: absolute;
    left: 50%;
    top: -20px; /* distance between #d1 and #d2 */
    -webkit-transform: translate(-50%, -100%);
}

#d2 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

JSFIDDLE