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

Last updated at 2025-10-06Posted at 2025-10-06

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

このように、SAMPLE画像を真ん中に持ってきたい

結論

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

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

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

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

left を 50% にした図

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

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

30%回転させたり
(rotate(0.3turn))

縦方向に3倍に引き伸ばしたり
(scale(1, 3))

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

＜例＞

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

何も指定しないと、左上

右に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%);
}

垂直方向にも中央揃え（ど真ん中）