cssでmodalの高さ中央揃えの調整について格闘する

Author:

modalって難解なのですよね。
横方向はともかく、縦方向が。
基本親のheightを100%にして、marginをautoにすればいいのだけれど。
これが画面全体の真ん中になりやがったりするのです。
ウィンドウの真ん中に出してほしいのに。

これ、ポイントは親のposition。
実はpositionがrelativeになっていると画面全体の中心になっちゃうんですよねえ。
親も子も。
position:absoluteにする都合上親をrelativeにしたくなるけど、それはあかんのです。

とりあえず実例を見てみればわかるかと。

See the Pen modal height examine by yuji ogata (@ogaty) on CodePen.

これをいじってみれば分かるのですが、positionに依存しているのです。
もちろんheightも90%とかに設定するとどれに対する90%か、というのも変わってきます。

これを理解せずにただmargin: autoとかしたりするとハマることがあるのでお気をつけて。

Facebook にシェア
Pocket