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/。在文章的最后，他正在解释使用ghost元素的技巧。我之前尝试过，它对我来说非常合适。

垂直对齐百分比

2 个答案: