垂直对齐百分比Div

Question

我想垂直对齐另一个div内的div。发生问题是因为两者都有百分比高度。这是我的jsfiddle：http://jsfiddle.net/QeF23/1/

html, body { 
    height: 100%; 
    padding: 0px; 
    margin: 0px; 
} 
#outerdiv { 
    height: 50%; 
    width: 100%; 
    background-color: #000000; 
}  
#innerdiv { 
    height: 90%; 
    background-color: red; 
    float: right; 
} 

这将是很容易解决，如果我不想百分比高度。

我试过使用display：table-cell方法，但还没有得到那个工作。可能是因为我错误地执行了它。

任何帮助，非常感谢。

Answer 1

你的JS小提琴看起来是正确的 - 如果你想对齐，中间也许尝试加入

#outerdiv { 
    height: 50%; 
    width: 100%; 
    background-color: #000000; 
    position:absolute; 
    top:25%; 
}   

编辑 - 如果你想红格在黑色的中心 - 使用相同的原则：

http://jsfiddle.net/QeF23/30/

#outerdiv { 
    height: 50%; 
    width: 100%; 
    background-color: #000000; 
    position:absolute; 
    top:25%; 
}  
#innerdiv {; 
    position:absolute; 
    width: 100%; 
    top:5%; 
    height: 90%; 
    background-color: red; 
} 

Answer 2

有一个读这篇文章http://css-tricks.com/centering-in-the-unknown/。在文章的最后，他解释了一个使用鬼元素的技巧。我之前尝试过，它对我来说是完美的。