商品画像を上下中央寄せにした時のCSSテクニック

-
カテゴリー:
CSS 

商品一覧ページなどで、商品のサムネイル画像が一定のサイズじゃない場合に、上下左右中央寄せするCSSテクニックのご紹介です。
※縦横のサイズに上限あり。

divで構成している場合、左右の中央寄せは簡易的にできるんですが、上下中央寄せはひと工夫必要になります。
tableで回避するなんてこともできるんですが、相当不細工なHTMLになるため、できればdiv構成にしたいそんな時は以下の手法を使います。

まず、HTML(クラス名は適当です)

 

続いて、CSS

左右中央寄せであれば、少ないコードの記述で対応できるのですが、上下の中央寄せが加わるとけっこうコードが面倒になるんですよね(汗