画像をボックスの上下左右センターに配置するスタイルシート

たまにはギョーム関連でおぼえたことを書いておかないと。大きさの決まったボックス内に画像を置いた時、ボックスのサイズにあわせて上下中央に配置するスタイルシートです。画像は横長でも縦長でも長辺がボックスのサイズにあわせた大きさになります。

See the Pen Centering Image by semicolon (@semicolon) on CodePen.

そこそこ利用する場面が多いため Codepen に保存しておきました。Gist にも置いてあるけど、その場でデモが見れる Codepen の方がこういう場合はよいですね。