今回は、positionプロパティとtransformプロパティを使って要素を上下左右中央寄せする応用のやり方を紹介します。
この方法はWebページにおけるファーストビューなどでよく使用する手法になるので、理屈で理解していきましょう。
positionプロパティ, transformプロパティの使い方を忘れた方は、「CSSのpositionプロパティを学ぼう」「CSSのtransformプロパティで要素を変形させよう」の記事を振り返ってみましょう。
上下左右中央寄せのやり方
早速、デモを見てみましょう。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
positionプロパティとtransformプロパティを理解している方であれば、上記のコードで読み取れるかと思います。
ポイントは以下になります。
positionを指定する
中央寄せにしたい要素にabsoluteを指定し、その基準になる親要素にrelativeを指定します。
今回は中央寄せにしたい「ZeroPlus」というテキストに対してposition: absolute;、その移動の基準になる親要素である、.boxというクラス名がついたdivに対してposition: relative;をそれぞれ指定しました。
transformのtranslateを指定する
中央配置したい要素を上から50％、左から50％移動させた上で、transformプロパティを使用して要素の大きさの半分ずつ位置を戻します。
基準になるdivの上から50％の距離、左からも50％の距離にテキストを移動させます。
しかし、このとき中央寄せしたい要素の左上が起点になるため、これらを指定しただけでは中央からずれてしまいます。
これを修正するために、テキスト要素の横幅半分の大きさ（50％）の分だけ左に戻します（translateX）。さらに、縦幅の半分（50%）分だけ上に戻します（translateY）。
CodePenのデモコードでは、transform: translateX(-50%) translateY(-50%);ではなくて、transform: translate(-50%, -50%);としていますが、実はCodePenのようにtranslate()だけでtranslateX()とtranslateY()の両方をまとめて指定することができます。
したがって、動かしたい要素に、
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}という4行のコードをセットで使用することで、上下左右中央寄せをすることができます。
まとめ
このコードは理屈で理解すると、あらゆる場面で値を変えて使用することができます。
ハンバーガーメニューでも上下左右中央寄せはしないものの、positionとtransformを組み合わせて使用するので、マスターしていきましょう。
