transformプロパティを使った画像の上下中央寄せ【CSS】

あるコンテンツ内に画像をいい感じに収める場合、正方形の場合だと特に特別なことをする必要はありませんが、横長の画像に上下中央、縦長の画像に左右中央という要望がよく挙ります。

今日、要素の上下中央寄せの方法はいくらかあります。画像の場合だと、恐らくtransformプロパティを使うことが最もお手軽な方法ではないかと思います。(transformプロパティがサポートされていることが条件にはなりますが)

flexboxという手もありますが、個人的にはflexboxよりも簡単にできると思います。

Vertical align anything with just 3 lines of CSSという記事を参考にしました。

コンテンツ幅に収める

コンテンツ幅のサイズを横とも縦とも50pxにした場合に、画像をこの枠内に収める場合には、max-width: 50px;max-height: 50px;を指定してやることで、横長の画像は幅が50pxで縦がアスペクト比を保った高さになります。縦長の画像も同じ原理です。


.contents-block_img img {
  width: auto;
  height: auto;
  max-width: 50px;
  max-height: 50px;
}

左右中央、上下中央

左右中央は、おなじみのtext-align: center;です。上下中央にするには、以下のようにimgにtransformプロパティを追加します。


.contents-block_img {
  width: 50px;
  height: 50px;
  text-align: center;
}

.contents-block_img img {
  width: auto;
  height: auto;
  max-width: 50px;
  max-height: 50px;
  position: relative; //追加記述
  top: 50%; //追加記述
  -webkit-transform: translateY(-50%); //追加記述
  -ms-transform: translateY(-50%); //追加記述
  transform: translateY(-50%); //追加記述
}

プレビュー

See the Pen Vertical align for Image by Minoru Hayakawa (@e-river) on CodePen.

という感じで画像であればたった数行追加するだけで簡単に上下中央にできます。