今回は、positionプロパティとtransformプロパティを使って要素を上下左右中央寄せする応用のやり方を紹介します。
この方法はWebページにおけるファーストビューなどでよく使用する手法になるので、理屈で理解していきましょう。
- positionを使用した、要素を上下左右中央寄せにする方法
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;をそれぞれ指定しました。
位置を指定する
次に親要素のどこに配置するかを指定します。
ちょうど中央にしたいので、
top:50%;
left:50%;
というように、上と左から50%という数値にします。
しかし、この段階ではちょうど中央の位置にしたはずが、実際に見ると中央から少しずれてしまっています。
なぜかというと、positionでは要素の左上の位置（画像の赤い点）が基準となって配置されるためです。
このずれを調整するために、次にtransformプロパティを使用して要素を少しだけ移動させます。
transformのtranslateを指定する
全体で見た時のずれを修正するために、transformを使用して調整します。コードは以下のようになります。
transform: translateX(-50%) translateY(-50%);
このようにして、中央に置きたい要素の半分の大きさだけ、左方向（translateX）と上方向（translateY）に戻しています。
図を見ていただくとイメージがより湧くと思います。
今回であれば「ZeroPlus」という文字の横幅の半分ぶん左に動き、縦幅の半分ぶん上に動きます。
このようにして、ちょうど親要素の中央に要素を置くことができるのです。
ちなみに、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で上下左右中央にする方法を改めて確認すると、
- 親要素の、上と左からそれぞれ50%の位置に指定する
- 要素の縦・横それぞれ半分だけ戻るようにtransformで調整する
という二段階がありました。
ハンバーガーメニューでも上下左右中央寄せはしないものの、positionとtransformを組み合わせて使用します。
仕組みを理解して、使いこなせるようにしていきましょう。
