いろんなやり方で中央揃え

(1)「text-align: center;」を使う

サンプル画像

(2)「margin:auto;」を使う

Box

(3-1)img要素をブロック要素にして「margin:auto;」

サンプル画像

(3-2)リンクを張った場合:リンク領域を画像のみにする

サンプル画像

(4)div内にサイズフリー画像をBoxの上下左右中央に

サンプル画像
サンプル画像2

(5)positionを使って上下左右中央配置

サンプル画像

(6)横幅可変のBOXを使って上下左右中央配置

サンプル画像

(7)FlexBoxを使っての上下中央配置

サンプル画像

(8)transformを使って上下中央配置

サンプル画像