将图像置于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居中并且＆＃34;浮动＆＃34;它上面。有一种纯粹的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 {     显示：块;     保证金：0自动;     }