今回は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で中央配置する方法でした。
コメント