【css】position:absoluteで要素を中央に配置する【transform】
公開日:2021年10月1日
position:absoluteで中央に据えたい
position:absoluteを指定して、中央に寄せたい。
でも、座標の中心は左上になるので「left:50%」とかに指定すると微妙(若しくは大幅)にずれる。
そんな時の備忘録。
transformで中央に寄せる
transform - CSS: カスケーディングスタイルシート | MDN
今時のブラウザをターゲットに制作するならばcss3を利用して問題無いでしょう。という事で、position:absoluteを指定、left:50%の位置に持ってきた上で transform:translate(-50%, 0);を指定する。
position: absolute; left: 50%; transform:translate(-50%, 0);
上下も中央にとかなら別途指定すればOK。