title: Vertically center div in a div with height auto
body: <p>Well, I got this structure:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    
      #parent{
         max-width: 800px;
         height: auto;
         margin: auto;
      }
      #child{
         position: absolute;
         width: 100%;
         height: 52px;
         display: none;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="parent"&gt;
         &lt;div id="child"&gt;&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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?</p>