最近CSSから手が離れていましたが、久しぶりに実務で触れました
案件は「モーダルを中央寄せにすること」！
margin:autoやtext-align:centerなど
中央寄せにする方法はいくつかありますが
これらが効かないときもあります
よくモーダルでこの現象がありました
こんなときに使いたい魔法のCSSを教えちゃいます
サンプルから学びましょう
See the Pen
center by kassa0916 (@kassa0916)
on CodePen.
まずposition:absoluteで絶対配置にします
※どこから中央寄せにしたいのか指定する場合は
親要素にposition:relativeをつけてあげてください
何も指定してないときは右上の端に要素が来てると思います
そこからtop:50%、left:50%にして中心に近づきます
しかし少し中心からズレていることに気づきましたか？
要素の左端を中心に配置されてますよね？
実はこれ...要素分の長さを考慮してないんです(´；ω；｀)
かめちゃん
どうやって要素分の長さを調整するの？
かっさ
transform:translate(○○,○○)を使いましょう
これで要素分の場所を移動できます
今回はtranslate(-50%, -50%)としてますが
translate(X軸,Y軸)と考えてみてください
要素の高さの50%分、上に移動
要素の幅の50%分、左に移動
これでぴったり真ん中になりますね！
ちなみにtransformは要素を
伸縮や回転させるときなども使います
もしこれでも中央寄せできなくて
画面上で真ん中固定であれば
position:fixedも試してみてください
※ずっと画面上で真ん中に表示されるので
取り扱い注意ですよ！
自分もモーダルでうまく調整できず
position:fixedで常に中央寄せにしました