2020/07/13 (更新日: 2020/08/20)

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

HTML/CSS

悩める人「プログラミング初心者です。CSSの、margin: 0 auto; で要素が中央揃えになる仕組みが知りたい。たまに、中央揃えにならないこともあるので、その理由も教えてください。」

こういった悩みにお応えします。

この記事の内容

margin: 0 auto; の指定で要素が中央揃えになる仕組み
【結論】margin: 0 auto; は「余白を左右均等に割り当てる」という意味
よくある質問『指定したのに、中央揃えにならないのですが・・・』

こんにちは、
TOMO（@Tomo___san_2525）です。

プログラミングを独学しており、少しずつこのブログにてアウトプットしています。

要素を中央揃えにするとき、「margin: 0 auto」をCSSにて使用している人は多いはず。
しかし、いわゆる「暗記」で記述している人のほうが多いと思います。

仕組みを知っておいたほうが、後々便利ですよ。

たまに、marginが反映されなくて悩むこともあると思います。
そのあたりの理由と解決策も含め、全てまとめました。

ぜひ参考にしてくださいませ。

margin: 0 auto; の指定で要素が中央ぞろえになる仕組み

初心者の方は、ぶっちゃけ正しく理解している人が少ないかもです。

特に、Progateで学習をしている人。
Margin: 0 auto;による中央揃えについて、「仕組み」の解説はほとんどないはず。

なので、「中央揃え = margin: auto;」という暗記だけでマークアップし、『あれ？動かない』みたいな感じになりがちですね。

「auto」= 「自動」という考えは、少しズレている件

かくいう僕もそうでして、下記です。

「auto」なので、「自動」で中央に揃えてくれる

上記と思っており、それ以上深く考えていなかったですね（笑）。

しかし、正しい仕組みと注意点を知ると、エラーが起こらなくなります。

この記事で使用するサンプルコード

<div class=”box” style="background-color:pink; width:300px; height:300px"></div>

1	<div class=”box” style="background-color:pink; width:300px; height:300px"></div>

1つBoxを用意し、CSSでmarginを指定した際に、Boxがどのように動くかを解説します。

※なお、ポイントは「余白」です。

どんどん見ていきましょう～。

通常（CSS指定なし）の場合

下記のとおりになります。
CSS指定なしの場合

上記ですよね。
画面の左上に、ポコッとBoxが配置される感じです。

画像で示した通り、Boxの右側が全て「余白」になっています。

margin-left: auto と指定した場合【今ある余白を左に寄せる】

ここが、重要。
margin:0 auto;を指定した場合

上記画像のとおりに動きます。

「margin-left:auto;」の持つ意味は、下記です。

いまある余白を、要素の左側に割り当てる

上記のとおり。
なので、もともと右側にあった「余白」が左側になり、Boxが画面の右側に配置されたわけです。

margin-right: auto と指定した場合【余白が右側に寄る】

最初と、変わらないはず。

つまり、下記です。

いまある余白を、要素の右側に割り当てる

上記です。
なので、CSS指定をしていないときと、見た目上は変わらない表示になるわけです。

【結論】margin: 0 auto; は「余白を左右均等に割り当てる」という意味

ここが、本題ですね。
下記になります。
margin: 0 auto;を指定し、中央揃えにした画像

上記の画像のとおりです。

先ほどと同じように意味を述べるとしたら、下記ですね。

いまある余白を、要素の右側にも、左側にも割り当てる

上記です。

しかし、余白をそのまま左右に割り当てると、画面からはみ出してしまいますよね。
はみ出しを防ぐために、余白を左右に2分割してくれるというイメージです。

その結果、左右同じだけの余白が生まれ、中央にBoxが配置される、という仕組みです。

よくある質問『指定したのに、中央揃えにならないのですが・・・』

結論、インライン要素にmarginを設定しようとしているからです。

HTMLタグには大きく分けて2種類あり、下記です。

ブロック要素
インライン要素

上記です。

marginは、「ブロック要素」にしか指定できません

なお、「ブロック要素」とは、例えば下記です。

h1タグ
pタグ
divタグ
sectionタグ

これらは「ブロック要素」と呼ばれ、その名のとおり「箱型」であるため、marginで余白を設定することが可能です。

「インライン要素」とは

「インライン」とは、下記です。

文中に配置される要素

上記です。

例えば、下記のようなものがインライン要素です。

imgタグ
spanタグ
aタグ
inputタグ

上記です。

「インライン要素」は、「箱型」ではないので、marginで余白を設定することができません。

とくに「imgタグ」と「aタグ」はハマりやすいですかね。
これらに対してmargin: 0 auto;を指定しても、中央揃えにはならないので注意です。

両者の違いを見分ける方法【Googleの「検証」でOK】

僕もそうですが、『この要素がブロックなのかインラインなのか、覚えられないよ・・・』という人も多いはず。

結論、Googleデベロッパーツールを使いCSSを参照することで、確認が可能です。

下記のとおり。

調べたい要素で右クリック → 「検証」 → 「user agent stylesheet」を確認

上記です。
Googleデベロッパーツールで確認する方法

ここに、その要素がブロック要素なのかインライン要素なのかが書いてあります。

ブロック要素 → display:block;
インライン要素 → display:inline;(もしくは記載なし)

上記のとおりです。
marginが反映されない場合、確認してみるといいですね。

そして最後に、「インライン要素にmarginを適用させる方法」を解説します。

「インライン要素」にmarginの指定をする方法

下記のとおり。

CSSで、display:block; もしくはdisplay:inline-block; を指定する

上記でOKです。

順番に、見ていきましょう。

CSSで、インライン要素をブロック要素へと変える方法

下記のとおりです。

HTML

<a href="">リンクはこちらからどうぞ</a>

1	<a href="">リンクはこちらからどうぞ</a>

CSS

a{
  display:block;
  width:200px;
  margin:0 auto;
}

display:block;

width:200px;

margin:0 auto;

}

リンク要素を中央揃えにした画像

※なお、インライン要素には「幅」がないので、widthで長さを指定してあげる必要があります。

画像の場合（HTMLにてwidthの指定が可能）

HTML

<img src="img/web-1935737_640.jpg" width="200px" height="200px">

1	<img src="img/web-1935737_640.jpg" width="200px" height="200px">

CSS

img{
  display: block;
  margin:0 auto;
}

img{

display: block;

margin:0 auto;

}

画像を中央揃えにした画像

こんな感じです。

参考になれば幸いです(‘ω’)ノ

では、また明日です！

HTML／CSSの参考書おすすめ

Programming

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

margin: 0 auto; の指定で要素が中央ぞろえになる仕組み

「auto」= 「自動」という考えは、少しズレている件

【結論】margin: 0 auto; は「余白を左右均等に割り当てる」という意味

よくある質問『指定したのに、中央揃えにならないのですが・・・』

両者の違いを見分ける方法【Googleの「検証」でOK】

「インライン要素」にmarginの指定をする方法

RELATED