Vertical Align Percentage Div

Question

I am trying to vertically align a div inside another div. The problem occurs because both have percentage heights. Here is my 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;
}

This would be very easy to solve if I didn't want percentage heights.

I have tried using the display: table-cell method, but haven't gotten that to work. May be that I was implementing it wrong though.

Any help, much appreciated.

Answer 1

Your JS fiddle looks correct - if you are trying to align it in the middle maybe try adding

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

EDIT - if you want the red div centered in the black - use the same principle:

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

Have a read at this article http://css-tricks.com/centering-in-the-unknown/. At the end of the article, he's explaining about a trick using ghost element. I tried that before and it's working perfectly for me.