Сосредоточить изображение на верхней части div

Question

У меня есть div с кучей вещей, и я хочу поместить изображение поверх него по центру. Мой основной макет выглядит примерно так:

<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>

Выше будет центрировать изображение на экране (изображение 66px x 66px BTW), но я хочу, чтобы оно было отцентрировано относительно родительского div и "плавало" над ним Есть ли чисто CSS способ сделать это? Должен работать в IE8 и последних версиях Firefox.

Редактировать: просто чтобы уточнить - я смотрю по центру по по горизонтали и вертикали и поверх родительского элемента.

Answer 1

Просто нужно поместить это в ваш родительский div:

position: relative;

Answer 2

Вы можете использовать:

<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>

Это будет работать наверняка.

Answer 3

Вы должны удалить все элементы абсолютного позиционирования и вместо этого сделать это img {display: block;поле: 0 авто;}