#38 flex以外でのセンタリング- 【ぴよぴよコーダーの開発日記】

これも毎回毎回ぐぐっているので、メモ。

センタリングしたい要素の幅・高さが可変で、疑似要素もしくは、何らかの理由でposition指定している要素の中央寄せは、translateプロパティを使う。

position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);

横移動ならtranslateX　デモ

position:absolute;
left:50%;
transform: translateX(-50%);

縦移動ならtranslateY

position:absolute;
top:50%;
transform: translateY(-50%);

transformとかtranslateとかややこしい。

超ざっくり認識する。移動するなら「transform : translate」

参考：transform:translate()

参考：要素をposition:absoluteで中央に配置する最新の方法

超ざっくり認識する。座標変わったり、変形するプロパティいっぱい持ってるメソッドが　transform　（transform: の後に、rotate（回転）, skew（傾斜）, scale（伸縮）, translate（移動）とか付けて使う）

参考：transform