今回は「margin: auto;」が効かない場合の対処法とその理由を分かりやすく解説します。
margin: auto;が効かない場合の対処法
margin:auto;が効かない場合は、適用させたい要素のCSSにwidthを記述しましょう。
widthを記述することで、margin: auto;が適用されます。
margin: auto;にwidthが必要な理由
widthによって要素の幅を決めないとmarginの幅が決まらないので、margin:auto;が効かなくなってしまいます。
数式で表すと分かりやすいです。
表示される要素の幅を「x」、marginの幅を「y」と、ブラウザの幅を「z」と置いたとき、これらの関係は次の数式であらわすことができます。
z＝x＋y
- x：要素の幅（width）
- y：marginの幅
- z：ブラウザの幅
「z」（＝ブラウザの幅）は具体的な数字で表すことができるので、変数は「x」「y」の2種類になります。
もし「x」に具体的な数字が入らなければ、「x」と「y」の組み合わせは無限になりますので、margin: auto;で明確な数字が導き出せず、margin: auto;が効かなくなってしまうのです。
したがって、widthで具体的な値を指定し、auto（自動）で算出するmarginの値を決めてやらねばなりません。
widthの値はパーセントでも良い
ちなみに、widthの値は「～px」だけではなく「～%」でも良いです。
一見、%（パーセント）だと具体的な数値が指定されておらずmargin:auto;が効かなくなりそうですが問題ありません。ちゃんと効きます。
なぜなら、「x」を「z」を使った値に置換することができるからです。
例えば、widthの値が80%の場合を見ていきましょう。
widthの値が80%の場合、これはブラウザ幅に対して80%という意味にあります。この場合の「x」と「z」の関係は次のとおり。
x＝0.8z
これを、一番最初の式に置換すると、
z＝x＋y → z＝0.8z＋y ⇔ 0.2z＝y
「z」はブラウザの幅なので具体的な数字が入るため、「y」（margin）は具体的な値となります。
したがって、widthの幅を%で指定しても、margin: auto;は正常に機能します。
今回のまとめ（margin: auto;）
というわけで、今回のまとめです。
- margin: auto;が効かない場合は、widthを記述する
- widthがないと、「margin」「要素」「ブラウザ」の幅の関係性が決まらないためmarginを自動算出できなくなる。
