Vertically center div in a div with height auto

Question

Well, I got this structure:

    
    #parent{
       max-width: 800px;
       height: auto;
       margin: auto;
    }
    #child{
       position: absolute;
       width: 100%;
       height: 52px;
       display: none;
    }

<div id="parent">
       <div id="child"></div>
    </div>

The child div is hidden per default. It gets visible by using jQuery (.fadeIn). Now the question is, how can I vertically center the child element by using only css?

Answer 1

I have created a prototype... But I had to modify your HTML and CSS so it might not be the best solution: http://jsfiddle.net/TmCwB/

HTML

<div id="outerDiv">
    <div id="parent">
         <div id="child"></div>
    </div>
</div>

CSS

#outerDiv {
    margin: 0 auto;
    width: 200px;
}
#parent{   
    background-color: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 200px;
    height: 500px;
}
#child{
    width: 100%;
    height: 52px;
    display: inline-block;
    background-color: blue;
}

Hope this helps...