青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

position: absoluteの水平中央寄せ

cssで position : absolute な要素を中央に配置する(上下左右センタリング)|プログラムメモ

どういう論理なんですかね

親要素に

position: relative;

して、中央寄せしたい要素に

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

でOK。

absoluteleft: 50%すると要素の始まり自体が50%からだから、つまり真ん中から要素が始まるので右にちょっと寄った感じになるけど、そこでtransform: translateX(-50%);で要素自体の幅の50%を引いてあげると中央に寄る、という原理、みたいです。

transformって%で指定すると基準が自分なのですね。親要素ではなく。

https://takuo4649design.com/weblog/note/archives/11831