position: absolute; で指定したオブジェクトを中央寄せする方法

box-aというdivの中にあるcircle.pngという画像があります。

<div id="box-a">
<img src="/images/circle.png" class="circle" >
</div>

これをpositionを使って中央寄せする方法は、

div.box-a {
position: relative;
}
div.box-a img.circle {
position: absolute;
left: 0;
right: 0;
margin: auto;
}

こういうふうに書きます。

続いて縦方向に中央寄せする方法は、

div.box-a {
position: relative;
}
div.box-a img.circle {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}

となります。

positionについて少しおさらい

そもそもこのpositionプロパティって分かりづらいです。
なんとなく使っている感じなので備忘録として少しおさらいします。

positionプロパティを使うときに気をつけておくことは、要素の基準がどこか？ということ。
「absolute」はウィンドウの左上または親要素。
「relative」は移動するときの基準が元いた位置。つまりpositionを記述する前に配置されていた場所から移動します。

動かしたい要素にpositionを使って位置を決めるには、親要素を作ってそこにrelative指定し、親要素を基準に子要素にabsolute指定して位置を決めると良いです。

参考サイト