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

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

Check the JSFiddle.

Answer 2

所以最后我自己找到了解决方案。由于“-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

Answer 3

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

}

演示