画像を簡単に中央寄せにする

下のようなHTMLの場合、

<div class="image">
	<p><img src="/image/example.jpg" alt="example" /></p>
</div>

もっとも多く用いられるCSSは

.image p {
	text-align: center;
}

だと思いますが、
今回はもっと簡単な方法。

image img {
	display: block;
	margin: auto;
}

また、右寄せ、左寄せの場合は下のようになる。

/* 右寄せ */
image img {
	display: block;
	margin-left: auto;
}
/* 左寄せ */
image img {
	display: block;
	margin-right: auto;
}