画像を上下中央揃えにするには
画像は左右中央揃えにしたいときはブロック要素などに入っている場合text-align:centerで中央揃えにできる。しかし上下中央揃えの場合、画像の高さがあらかじめ決まっている場合を除くとCSSだけで上下中央揃えをすることはできない。ひと昔前であれば画像をtableタグ内に入れて上下中央揃えを実現していたが現在ではtableタグは基本的に表としての役割以外で使用することは非推奨である。
JQueryを使用して画像を上下中層揃えにする
画像を上下中層揃えにする最も簡単な方法はJQueryを使用する方法である。やり方は簡単でまずJQueryのeachで上下中層揃えしたい画像エレメントを指定し、それぞれの幅と高さを取得する。取得した幅が高さよりも大きかった場合は画像の（最大幅 - 高さ） / 2 の計算式で画像のmargin-topの値を出す。
以上の手順で画像を上下中層揃えにすることが可能になる。
JQueryを使用して画像を上下中央揃えにするサンプル
