はじめに
いつも目測でなんとなくやってしまっていた。
インターン先でコードを読んでいる途中、綺麗に配置する方法を知ったのでまとめた。
今回は codepen を使って説明する。
中心に配置したい要素を用意する
横が 300px, 縦が 150px の長方形を作った。
要素の左上端を中心に移動させる
position: absoluteとし、left: 50%かつtop: 50%の位置に移動させた。
このときの 50% というのは、画面幅基準であって要素幅基準ではないことに注意。
要素の左上端部分が白い画面の中心にある状態になった。
要素の横幅50%分だけ左に移動させる
transform属性を使い、translate: (-50%)を指定。
画面の中心にあった要素の左上端が、x軸負の向き（左）に 50% 移動した。
このときの 50% は、要素の横幅に対しての 50% である。
これで、要素が水平方向の中心に配置された。
要素の縦幅50%分だけ上に移動させる
translate: (-50%, -50%)とし、y軸負の向き（上）に 50% 移動させた。
このときの 50% は、要素の縦幅に対しての 50% である。
要素を白い画面の中央に配置することができた。
画面幅を変えてもレイアウトはそのまま。
おわりに
CSSを書くたびに、勉強し直さなきゃと思っている。