title: How to center an absolute positioned item vertically?
body: <p>I would like to align an absolute positioned div. Top:50%, bottom:50% not working, what's the solution for this?</p>
  
  <p>CSS</p>
  
  <pre><code>#container {
      position:relative;
      background:red;
      width:600px;
      height:600px;
  }
  
  #cen {
      position:absolute;
      width:300px;
      height:300px;
      background:grey;
      top:50%;
      bottom:50%;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="cen"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2xq5F/" rel="nofollow">http://jsfiddle.net/2xq5F/</a></p>