こんにちは。今回はmargin: auto;をさらに深めていこうと思います。
margin: auto;での中央揃えが何故動くのか、基本的なことはこちらをご覧ください。
position: abusolute;との併用による中央揃え
margin: auto;を用いると要素を中央揃えにできることは知られていますが、position: absolute;と併用することでより特殊な中央揃えを行うことができます。この方法は、モーダルウィンドウなどを作るときに使える方法です。
モーダルウィンドウの作り方はこちらをご覧ください。
画面、もしくは親要素のY方向に対して中央揃え
position: absolute;を用いますので、画面もしくは親要素に対しての中央という話になります。
まずは適当な要素を作って配置しましょう。ここでポイントなのは、width/heightをauto以外の値にすることです。
|
1 2 3 4 |
index.html <div class="Box"></div> |
|
1 2 3 4 5 6 7 8 |
style.css .Box { width: 300px; height: 200px; background-color: skyblue; } |
さて、横方向ではmargin-left/rightをauto;にすればよかったのですが、縦方向はどうでしょうか。
ここでposition: absolute;とmargin-top/bottomを同時に用います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
style.css .Box { position: absolute; /*追加*/ top: 0; /*追加*/ bottom: 0; /*追加*/ margin-top: auto; /*追加*/ margin-bottom: auto; /*追加*/ width: 300px; height: 200px; background-color: skyblue; } |
このように、top/bottomを0にした上でmargin-top/bottomをautoにすることで縦方向の中央に揃えることができました。これをさらに横方向に対しても中央に置いてみましょう。
画面、もしくは親要素のX、Y方向に対して中央揃え
先程のスタイルに、さらに横方向についての情報を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
style.css .Box { position: absolute; top: 0; bottom: 0; left: 0; /*追加*/ right: 0; /*追加*/ margin-top: auto; margin-bottom: auto; margin-left: auto; /*追加*/ margin-right: auto; /*追加*/ width: 300px; height: 200px; background-color: skyblue; } |
このように、縦方向の時と同様で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が等しい値になる。
なんとなくこの条件をコードっぽく書いてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
if ( left !== "auto" && width !== "auto" && right !== "auto" && marginLeft === "auto" && marginRight === "auto" ) { equalizeMarginLeftAndRight() } if ( top !== "auto" && height !== "auto" && bottom !== "auto" && marginTop === "auto" && marginBottom === "auto" ) { equalizeMarginTopAndBottom() } |
このような条件になっています。left, width, right、そしてtop, height, bottomはそれぞれ初期値がautoです。
そのため、Y方向に中央揃えする場合はtop, height, bottomをauto以外の値に、X方向に中央揃えする場合はleft, width, rightをauto以外の値にする必要がありました。
まとめ
ということで、margin: auto;とposition: absolute;が併用された場合の挙動について解説しました。
margin: autoに限らず中央揃えに関してはさまざまな方法があるので、機会があれば「いろんな中央揃え」という切り口で解説しようと思います。
コメントを残す