html - 垂直对齐百分比 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%;
}        

编辑-如果您希望红色 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/。在文章的最后，他解释了一个使用幽灵元素的技巧。我之前尝试过，它对我来说非常有效。