Center image on top of div

Question

I have a div with a bunch of things and I want to make an image centered on it. My basic layout looks something like this:

<div> <img style="display:block; position: absolute; top:50%; left:50%; margin-top:-33px; margin-left:-33px;" src="Images/ajax-loader_001.gif" /> <!-- a bunch of tables and stuff that doesn't have a conveniently fixed size --> </div> 

The above will center the image on the screen (66px x 66px BTW image), but I want it to be centered relative to the parent div and “floating” above it. Is there a purely css way to do this? You must work in IE8 and the latest versions of Firefox.

Edit: just to clarify - I'm looking for the center both horizontally and vertically and above the parent.

Answer 1

Just need to put this in the parent div:

 position: relative; 

Answer 2

You can use:

 <div> <img style="display:block; position: relative; margin:auto" src="Images/ajax-loader_001.gif" /> <!-- a bunch of tables and stuff that doesn't have a conveniently fixed size --> </div> 

This will work for sure.

Answer 3

You must remove all absolute positioning elements and instead do it img {display: block; margin: 0 auto; }