【CSS】画像を中央揃えする方法

left 等を使って画像の位置を調整しているときに、画像を水平方向に中央寄せしたい。（原点を画像の中心にしたい）

結論

left を 50%にし、transform を translate(-50%, 0) とする。

#img {
    position: absolute;   //leftで画像の位置を調整したい場合に必要
    left: 50%;
    transform: translate(-50%, 0);
}

left を 50% という値にすると、親要素の幅の半分だけ、右に画像が移動します。

#img {
    position: absolute;   //leftで画像の位置を調整したい場合に必要
    left: 50%;
}

しかし、このままだと、画像の左端の辺が中央に来てしまいます。

transform に値を設定すると、画像を回転したり、拡大縮小したり、移動したり、いろいろ変形できます。

translate を使うと、自分自身を移動させることが出来ます。

＜例＞

#img {
    position: absolute;
    transform: translate(30px, 50px);
}

translate(30px, 50px) とすると、右に30px, 下に50px 移動できます。

つまり、translate(-50%, 0) とすると、左に（自分自身の幅の）50%、自分自身を移動させるということです。これで画像の基準が、中央に移動するので、

#img {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

とすることで画像を水平方向の中心に移動できるというわけです。

top にも 50% を指定し、transform(-50%, -50%) とします。

#img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}