Css float 如何垂直对齐动态高度

我尝试将固定div内的浮动div与动态高度居中对齐。 除了固定的父div之外，有没有其他方法可以在不定义高度的情况下执行此操作

以下是HTML代码：

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

这里有一把小提琴：

谢谢：）

请尝试以下代码：

---

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

Hi@filip，谢谢，但这不是我想要的。我需要将子对象的内容垂直对齐到中间+子对象应该向左浮动，而不是位于其父对象的中心。（测试应该是垂直中间的位置）这是我要找的，但没有高度：100px；在子元素中，我希望它由父元素动态调整高度（高度：100%），谢谢Filip，但我正在寻找“非w3c草案”的解决方案。据我所知，display:box（通常称为flexbox）仍处于w3c组织的草稿状态。

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

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

}