divの上にイメージを中心にする

Question

私はそれにたくさんのものを持ったdivを持っています。私がしたいのは、その上にイメージを置くことです。上記（画像が66px X 66px BTWである）の画面で画像を中央に、私はそれが親の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> 

：私の基本的なレイアウトは、次のようになります。これを行うための純粋なCSSの方法はありますか？ IE8と最近のFirefoxのバージョンで動作する必要があります。

編集：明確にするために - 私はの両方をに置き、親の上に置いてください。

Answer 1

はちょうどあなたの親のdivの上にこれを配置する必要があります。

position: relative; 

Answer 2

すべての絶対位置のものを削除し、代わりにこの IMG { ディスプレイ行う必要があります。ブロックを。 margin：0 auto; }

Answer 3

は、あなたが使用することができます。

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

これは確かに動作します。