Как вертикально выровнять динамическую высоту

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; 

} 

Новая часть делает элемент по горизонтали и по вертикали с центром его родителя.