【css】PositionとTransformで上下左右、中央に配置する方法を解説

こんにちは。
Web制作者のhikaruです。

今回はPositionとTransformを併用して、
上下中央に配置する方法を解説していきます。

ソースコード

<div class="box">
    <div class="box__item"></div>
</div>

.box {
        width: 100%;
        height: 100vh;
        position: relative;
    }
    .box__item {
        width: 180px;
        height: 180px;
        background: #aee0a9;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }

PositionとTransformの仕組み

まずPositionの基本から解説。

動かしたい要素にposition: absoluteを指定、
動かしたい要素を囲っている親要素にposition: relativeを指定するのが一般的です。

動かしたい要素(position: absoluteを指定した要素)は、
親要素を基準とした上下左右から、
数値を指定して移動させることが可能になります。

PositionとTransformを併用して上下左右中央に
配置する仕組み

一見positionだけでも中央に配置できそうですが、
実は問題点があります。

次の図の通りleft:50%を指定しても、
子要素の一番左側から50%になってしまうので、
中央に配置することはできません。

中央に配置するためにTransformを使用する

left:50%だけでは中央配置になりませんが、
動かす子要素にtranslateX(-50%)を指定することで、
中央配置が可能になります。

translateX(-50%)は、
動かす子要素の幅50%分、左側に移動しています。

まとめ

ここまで左右方向で解説してきましたが、
上下方向に関しても同じ仕組みとなっています。

以上、
PositionとTransformで中央配置する方法でした。