title: Bug when using absolute position and percentages to vertically center child div
body: <p>I have a div that is my "popup" that I'm animating to show up in the direct center of its parent div. So I'm using absolute positioning, negative margins, and left+top to position it so that I can simply animate it with <code>-webkit-transform: translateY(-100%)</code> on hover. Works great on Safari and Mobile Safari.</p>
  
  <p>If you use pixels in Chrome or Firefox it works fine, even if you use all percentages but set the parent div width using pixels it will work. BUT, if you use all percentages FF+Chrome seems to go completely bunk and render the percentages based off something I can't figure out.</p>
  
  <p><a href="http://jsfiddle.net/2dVxm/">Fiddle Example:</a> View this in Safari and FF/Chrome to see that Safari renders <code>#pixels</code> just the same as <code>#percents</code> is and should be rendered in both. Is it Safari that's rendering this wrong then?</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="pretendImage"&gt;&lt;/div&gt;
      &lt;div id="percents"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my CSS:</p>
  
  <pre><code>#percents {
      width:100%;
      height:100%;
      position:absolute;
      top:50%;
      left:50%;
      margin:-50% 0 0 -50%;
  }
  .container {
      position:relative;
      width:50%;
      height:auto;
  }
  .pretendImage {
      width:200px;
      height:200px;
  }
  </code></pre>
  
  <p>Well I found a workaround by adding an additional wrapper. I'd still like to know what causes this though.</p>
  
  <p><a href="http://jsfiddle.net/EfPtK/">My workaround: Fiddle</a> Uses a wrapper to avoid having to compute the top+margins the inner div that uses 80% width/height.</p>