title: Center an image on top of a div
body: <p>I have a div with a bunch of stuff in it and what I want to do is place an image, centered, on top of it. My basic layout looks something like this:</p>
  
  <pre><code>&lt;div&gt;
      &lt;img style="display:block; position: absolute; top:50%; left:50%; margin-top:-33px; margin-left:-33px;" src="Images/ajax-loader_001.gif" /&gt;
      &lt;!-- a bunch of tables and stuff that doesn't have a conveniently fixed size  --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The above will center the image in the screen (the image is 66px x 66px BTW), but I want it centered relative to the parent div and "floating" above it. Is there a purely css way of doing this? Needs to work in IE8 and recent Firefox versions.</p>
  
  <p>Edit: just to clarify - I'm looking to center <em>both</em> horizontally and vertically and on top of the parent.</p>