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 fiddle 看起来是正确的——如果你想在中间对齐它，可以尝试添加

#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;
}