如何垂直对齐动态高度

Question

我想中心对齐动态高度固定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

谢谢:)

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

} 

新的零件，使水平方向和垂直方向上居中对于其父元素。