title: How to center vertically a container div
body: <p>I can't center vertically <code>popup_interstitial_table</code> that contains an ads type container.</p>
  
  <p>The fiddle it is autoexplained: <a href="http://jsfiddle.net/NomikOS/D8LLM/" rel="nofollow">http://jsfiddle.net/NomikOS/D8LLM/</a>   </p>
  
  <blockquote>
    <p>jQuery solutions are welcome too.</p>
  </blockquote>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="popup_interstitial"&gt;
      &lt;div id="parent"&gt;
          &lt;div id="popup_interstitial_pro_head_text"&gt;
              Headline text 
          &lt;/div&gt;
          &lt;div id="child"&gt;
              &lt;div id="popup_interstitial_table"&gt;
                  &lt;div id="popup_interstitial_row2"&gt;
                      &lt;div id="popup_interstitial_title"&gt;&lt;?php echo $title; ?&gt;&lt;/div&gt;
                      &lt;img id="popup_interstitial_image" src="&lt;?php echo $image; ?&gt;"&gt;
                      &lt;div id="popup_interstitial_description"&gt;&lt;?php echo $description; ?&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The related CSS code is:</p>
  
  <pre><code>#popup_interstitial_pro_head_text{
      color:#FFF; 
      font-size: 2em;
      font-weight: normal;
      text-shadow: 0.05em 0.05em #666;
      background-color: #A5CF4C;
      width: 100%;
      padding-left: 1%;
      padding-top: 0.8%;
      padding-bottom: 0.8%;
      border-top-width: thin;
      border-top-style: solid;
      border-top-color: #648323;
      border-bottom-width: thin;
      border-bottom-style: solid;
      border-bottom-color: #759928;
      margin-bottom: 2%;
      -webkit-box-shadow: 1px 1px 8px #333333;
      -moz-box-shadow: 1px 1px 8px #333333;
      khtml-box-shadow: 1px 1px 8px #333333;
      filter: shadow(color=#333333, direction=135, strength=0);
  }
  #popup_interstitial {
      display: none;
      width: 100%;
      height: 100%;
      position: fixed;
      background-color:#FFFFFF;
      color:#111;
      z-index:9999;
      top:0;
      left:0;
  }
  #popup_interstitial_table {
      width: 50%;
      margin: 0 auto 0 auto;
      background-color:#E7E7E7;
      padding: 1em 2.2em;
      font: 0.85em "Trebuchet MS", Arial, Helvetica, sans-serif;
      margin-top: 5%;
      vertical-align: center;
  
  }
  #popup_interstitial_title{
      color:#FFF; 
      font-size: 1.5em;
      font-weight: bold;
      padding: 0 0 0 0.3em;
      border-bottom-width: thin;
      border-bottom-style: solid;
      border-bottom-color: #777;
      background-color: #888; 
      border-radius: 0.3em;
  }
  #popup_interstitial_description{
      padding-top: 1.7em;
      padding-bottom: 1.2em;
      border-bottom-width: thin;
      border-bottom-style: solid;
      border-bottom-color: #ccc;
      line-height:1.5em;
  }
  
  #popup_interstitial_image{
      vertical-align: baseline;
      margin: 25px 20px 3px 0;
      -webkit-box-shadow: 1px 1px 8px #333333;
      -moz-box-shadow: 1px 1px 8px #333333;
      khtml-box-shadow: 1px 1px 8px #333333;
      filter: shadow(color=#333333, direction=135, strength=0);
      padding: 4px;
      margin-left: 6px;
      float: left;
  }
  </code></pre>
  
  <p>This is the most important:</p>
  
  <pre><code>#parent {position: relative;}
  #child {
      padding: 0% 0;
      margin: 0 auto; 
  }
  </code></pre>