position: absolute;
で絶対配置している要素を中央寄せする方法をご紹介します。
左右中央寄せ
まずは左右中央寄せの方法です。
See the Pen
absolute(左右中央揃え) by ken (@ken_shindo)
on CodePen.
left: 50%;
を指定すれば左右中央寄せになるんじゃないかと最初は考えてしまいますが、左端を起点として中央寄せするため、中に入っているコンテンツ分ズレてしまうんですね。
かといって%の数値を調整するのも、めんどくさいですしスッキリしません。
そこで、transform: translatex(-50%);
を指定してあげます。
すると、要素(今回はp)の大きさの-50%分戻してくれるので、完全に中央に配置することができます。
上下中央寄せ
同じ考え方で、上下中央寄せも可能です。
See the Pen absolute(上下中央) by ken (@ken_shindo) on CodePen.
top: 50%;
を指定し、transform: translateY(-50%);
で戻しています。
上下左右中央寄せ
上記どちらも指定して、上下左右中央寄せも可能です。
See the Pen absolute(上下左右中央) by ken (@ken_shindo) on CodePen.
IE11で横スクロールが出る問題
上記の中央寄せテクニックですが、IE11でバグがあります。
左右中央揃えの場合、右に横スクロールバーが出てしまいます。
transform: translatex(-50%);
で戻しているにもかかわらず、left: 50%;
で移動した分の余白ができたままになってしまうようです。
上下中央の際も、下に余白ができることがあります。
この対策については、移動する方向を逆にすることで解消されます。
/*上下左右中央寄せ(IE11バグ対策)*/
p {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
background-color: #99ffff;
padding: 20px;
}
左右中央揃えの場合
left: 50%;
ではなく、right: 50%;
を指定。
transform: translateX(50%);
で戻します。逆方向に移動しているのを戻すのでマイナス値ではなく50%になることに注意。
上下中央揃えの場合
top: 50%;
ではなく、bottom: 50%;
を指定。
transform: translateY(50%);
で戻します。
デフォルトでIE11対策をするなら、基本的にright
とtop
を使うのが得策です。
まとめ
今回はposition: absolute;
による中央寄せをご紹介しました。
コーディングする上で多用するので、覚えておくと便利です。