【CSS】margin: 0 auto;で要素が中央揃えになる仕組み【初心者向け】

悩める人「プログラミング初心者です。CSSの、margin: 0 auto;
で要素が中央揃えになる仕組みが知りたい。たまに、中央揃えにならないこともあるので、その理由も教えてください。」
こういった悩みにお応えします。
この記事の内容
- margin: 0 auto; の指定で要素が中央揃えになる仕組み
- 【結論】margin: 0 auto; は「余白を左右均等に割り当てる」という意味
- よくある質問『指定したのに、中央揃えにならないのですが・・・』
こんにちは、
TOMO(@Tomo___san_2525)です。
プログラミングを独学しており、少しずつこのブログにてアウトプットしています。
要素を中央揃えにするとき、「margin: 0 auto
」をCSSにて使用している人は多いはず。
しかし、いわゆる「暗記」で記述している人のほうが多いと思います。
仕組みを知っておいたほうが、後々便利ですよ。
たまに、marginが反映されなくて悩むこともあると思います。
そのあたりの理由と解決策も含め、全てまとめました。
ぜひ参考にしてくださいませ。
margin: 0 auto; の指定で要素が中央ぞろえになる仕組み

初心者の方は、ぶっちゃけ正しく理解している人が少ないかもです。
Margin: 0 auto;による中央揃えについて、「仕組み」の解説はほとんどないはず。
なので、「中央揃え = margin: auto;」という暗記だけでマークアップし、『あれ?動かない』みたいな感じになりがちですね。
「auto」= 「自動」という考えは、少しズレている件
かくいう僕もそうでして、下記です。
上記と思っており、それ以上深く考えていなかったですね(笑)。
しかし、正しい仕組みと注意点を知ると、エラーが起こらなくなります。
この記事で使用するサンプルコード
1 |
<div class=”box” style="background-color:pink; width:300px; height:300px"></div> |
1つBoxを用意し、CSSでmarginを指定した際に、Boxがどのように動くかを解説します。
※なお、ポイントは「余白」です。
どんどん見ていきましょう~。
通常(CSS指定なし)の場合
下記のとおりになります。
上記ですよね。
画面の左上に、ポコッとBoxが配置される感じです。
画像で示した通り、Boxの右側が全て「余白」になっています。
margin-left: auto と指定した場合【今ある余白を左に寄せる】
ここが、重要。
上記画像のとおりに動きます。
「margin-left:auto;
」の持つ意味は、下記です。
上記のとおり。
なので、もともと右側にあった「余白」が左側になり、Boxが画面の右側に配置されたわけです。
margin-right: auto と指定した場合【余白が右側に寄る】

最初と、変わらないはず。
つまり、下記です。
上記です。
なので、CSS指定をしていないときと、見た目上は変わらない表示になるわけです。
【結論】margin: 0 auto; は「余白を左右均等に割り当てる」という意味
ここが、本題ですね。
下記になります。
上記の画像のとおりです。
先ほどと同じように意味を述べるとしたら、下記ですね。
上記です。
しかし、余白をそのまま左右に割り当てると、画面からはみ出してしまいますよね。
はみ出しを防ぐために、余白を左右に2分割してくれるというイメージです。
その結果、左右同じだけの余白が生まれ、中央にBoxが配置される、という仕組みです。
よくある質問『指定したのに、中央揃えにならないのですが・・・』

結論、インライン要素にmarginを設定しようとしているからです。
HTMLタグには大きく分けて2種類あり、下記です。
- ブロック要素
- インライン要素
上記です。
marginは、「ブロック要素」にしか指定できません
なお、「ブロック要素」とは、例えば下記です。
- h1タグ
- pタグ
- divタグ
- sectionタグ
これらは「ブロック要素」と呼ばれ、その名のとおり「箱型」であるため、marginで余白を設定することが可能です。
「インライン要素」とは
「インライン」とは、下記です。
上記です。
例えば、下記のようなものがインライン要素です。
- imgタグ
- spanタグ
- aタグ
- inputタグ
上記です。
「インライン要素」は、「箱型」ではないので、marginで余白を設定することができません。
これらに対して
margin: 0 auto;
を指定しても、中央揃えにはならないので注意です。両者の違いを見分ける方法【Googleの「検証」でOK】
僕もそうですが、『この要素がブロックなのかインラインなのか、覚えられないよ・・・』という人も多いはず。
結論、Googleデベロッパーツールを使いCSSを参照することで、確認が可能です。
下記のとおり。
上記です。
ここに、その要素がブロック要素なのかインライン要素なのかが書いてあります。
- ブロック要素 →
display:block;
- インライン要素 →
display:inline;
(もしくは記載なし)
上記のとおりです。
marginが反映されない場合、確認してみるといいですね。
そして最後に、「インライン要素にmarginを適用させる方法」を解説します。
「インライン要素」にmarginの指定をする方法
下記のとおり。
display:block;
もしくはdisplay:inline-block;
を指定する上記でOKです。
順番に、見ていきましょう。
CSSで、インライン要素をブロック要素へと変える方法
下記のとおりです。
HTML
1 |
<a href="">リンクはこちらからどうぞ</a> |
CSS
1 2 3 4 5 |
a{ display:block; width:200px; margin:0 auto; } |
※なお、インライン要素には「幅」がないので、widthで長さを指定してあげる必要があります。
画像の場合(HTMLにてwidthの指定が可能)
HTML
1 |
<img src="img/web-1935737_640.jpg" width="200px" height="200px"> |
CSS
1 2 3 4 |
img{ display: block; margin:0 auto; } |
こんな感じです。
参考になれば幸いです(‘ω’)ノ
では、また明日です!
HTML/CSSの参考書おすすめ
【HTML】divタグとsectionタグの違い・使い分けまとめ【全てdivだとNGです】
divタグとsectionタグの使い分けの仕方を解説します。両者とも「区画する」ことを目的にしていますが、ニュアンスが異なります。特に、全てのhtml構造をdivタグだけでマークアップするのはクローラビリティの面でNGです。