超簡単！cssのpositionを使って要素を上下左右で中央寄せにする方法

2016年11月3日

主にメインビジュアルのところで、positionを使って要素を中央に持ってくることがあり、これまでposition:absolute;でtop:○%～、left:○%～で中央に寄せていたのですが、ブラウザの横幅を変えるとズレてしまったり、そもそもleft:○%で指定したのが本当に中央になっているのかも怪しいことがありました。

しかし、実は超簡単に中央寄せができる方法がありました！
なんで今まで気づかなかったのか、、、
そのソースコードを下記に残しておきます。

See the Pen WoeyXx by hiroy (@hiroya) on CodePen.

親要素にposition:relative;、子要素にposition:absolute;を入れて、top、right、bottom、leftの値を0にし、marginをautoにすると中央に寄るという仕組みです。
この時に、子要素に幅と高さがないと中央によらないので忘れずに！

こんなに簡単にできるのに今まで変なcssを書いてしかも時間まで掛けてしまってたな～。
これで解決ですね！