垂直对齐百分比Div

Question

我试图在另一个div内垂直对齐div。问题发生是因为两者都有百分比高度。这是我的网址: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%;
}        

EDIT -如果你想让红色div居中于黑色-使用相同的原则:

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/。在文章的最后，他解释了一个使用幽灵元素的技巧。