如何垂直对齐动态高度

【问题标题】：how to vertical align dynamic height如何垂直对齐动态高度
【发布时间】：2014-02-01 02:29:31
【问题描述】：

我正在尝试以动态高度居中对齐固定 div 内的浮动 div。除了固定的父div之外，有什么方法可以在不定义高度的情况下做到这一点？

这里是 HTML 代码：

<div class="main">
    <div class="child">
        test
    </div>
</div>

这是css：

.main{
    position:fixed;
    height:100px;
    top:0px;
    width:100%;
    background-color:yellow;
}

.child{
    display:table-cell;
    height:100%;
    vertical-align:middle;
    width:100px;
    background-color:lightblue;
    float:left;
}

这里有一个小技巧：the link to the jsFiddle

谢谢:)

【问题讨论】：

标签： css-float vertical-alignment fixed-width

【解决方案1】：

试试这个代码：

http://jsfiddle.net/KS523/4/

.child{
    height:100%;
    vertical-align: center;
    width:100px;
    background-color:lightblue;
    display:inline-block;


/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}

新部分使元素水平和垂直居中于其父元素。

【讨论】：

嗨@filip，谢谢，但这不是我要找的。我需要孩子的内容与中间垂直对齐+孩子应该向左浮动而不是在其父母的中心。（“测试”应位于垂直中间）
这就是我要找的 jsfiddle.net/KS523/3 但没有高度：100px;在子元素中，我希望它是父元素的动态高度（高度：100%）
感谢 Filip，但我正在寻找“非 w3c 草案”的解决方案。据我所知，display:box（或通常命名的 flexbox）仍处于 w3c 组织的草稿状态。