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

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とかしたりするとハマることがあるのでお気をつけて。

Author Info(オガティ

エンジニアとして勤め、インフラ周りの開発を経た後Web業界へ異動。
プライベートでもブログ「ogatism」の運営や電子書籍の執筆、占星術師としての活動など幅広い分野で活動中。
詳細はこちら

占い鑑定レポート作成サービス受付中

◆ ogatismをFeedlyに登録 ◆
follow us in feedly