如何垂直對齊動態高度

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; 

} 

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