margin: auto;の正体を暴く(応用編)

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はmargin: auto;をさらに深めていこうと思います。

margin: auto;での中央揃えが何故動くのか、基本的なことはこちらをご覧ください。

margin: auto;の正体を暴く

2019年9月9日

position: abusolute;との併用による中央揃え

margin: auto;を用いると要素を中央揃えにできることは知られていますが、position: absolute;と併用することでより特殊な中央揃えを行うことができます。この方法は、モーダルウィンドウなどを作るときに使える方法です。

モーダルウィンドウの作り方はこちらをご覧ください。

【徹底解説】5歳でも分かる、モーダルウィンドウの作り方(jQuery編)

2021年10月20日

画面、もしくは親要素のY方向に対して中央揃え

position: absolute;を用いますので、画面もしくは親要素に対しての中央という話になります。

まずは適当な要素を作って配置しましょう。ここでポイントなのは、width/heightをauto以外の値にすることです。

さて、横方向ではmargin-left/rightをauto;にすればよかったのですが、縦方向はどうでしょうか。

ここでposition: absolute;とmargin-top/bottomを同時に用います。

このように、top/bottomを0にした上でmargin-top/bottomをautoにすることで縦方向の中央に揃えることができました。これをさらに横方向に対しても中央に置いてみましょう。

画面、もしくは親要素のX、Y方向に対して中央揃え

先程のスタイルに、さらに横方向についての情報を追加します。

このように、縦方向の時と同様でleft/rightを0にしmargin-left/rightをautoにすることで中央に配置されます。

なぜ中央に揃うのか

position: absoluteと併用することで、margin: autoだけでは実現できなかった「縦方向の中央揃え」「縦横どちらに対しても中央揃え」が実現できました。なぜこのような挙動をするのでしょうか。

そのように定義されているから

はい、身も蓋もない言い方になってしまいますがこれが回答です。

具体的には、position: absoluteが指定されている要素に対して以下のようなルールになっています。(参考:https://www.w3.org/TR/CSS21/visudet.html

  • left, width, rightがどれもautoでない場合、margin-leftとmargin-rightの両方がautoならば2つのmarginが等しい値になる。
  • top, height, bottomがどれもautoでない場合、margin-topとmargin-bottomの両方がautoならば2つのmarginが等しい値になる。

なんとなくこの条件をコードっぽく書いてみましょう。

このような条件になっています。left, width, right、そしてtop, height, bottomはそれぞれ初期値がautoです。

そのため、Y方向に中央揃えする場合はtop, height, bottomをauto以外の値に、X方向に中央揃えする場合はleft, width, rightをauto以外の値にする必要がありました。

まとめ

ということで、margin: auto;とposition: absolute;が併用された場合の挙動について解説しました。

margin: autoに限らず中央揃えに関してはさまざまな方法があるので、機会があれば「いろんな中央揃え」という切り口で解説しようと思います。

margin: auto;の正体を暴く

2019年9月9日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください