html - 在 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)，但我希望它相对于父 div 居中并“ float ”在其上方。有没有纯粹的 css 方式来做到这一点？需要在 IE8 和最新的 Firefox 版本中工作。

编辑:只是为了澄清 - 我希望将 两者 水平和垂直居中，并在父级之上。

Answer 1

只需要把它放在你的父 div 上:

position: relative;