CSSのmarginは外側に余白を空けるプロパティです。このmarginを使って要素のセンタリングを行っている方も多いと思いますが、このプロパティを使うとなぜセンタリングできるのかを掘り下げてみます。

marginのサンプルコード

まずはmarginを使ったサンプルコードを見てみましょう。

<div class="container">
  <div class="item">ITEM</div>
</div>

CSSはこちらです。

.container {
  padding: 2rem; // 内側への余白を2remに。
  background: #000000; //背景を黒色に。
}

.item {
  margin: 0 auto;
  width: 10rem; // 横を10remに。
  height: 10rem; // 縦を10remに。
  background: #ffffff; // 背景を白色に。
}

.containerというボックスの中に.itemというボックスがあり、この.itemにmargin:0 auto;が入っていてセンタリングされています。

See the Pen
margin:0 auto; by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

marginの特性

marginは値には4つの方法で指定することができます。

margin: 1rem 2rem 3rem 4rem; // 上、右、下、左
margin: 1rem 2rem 4rem; // 上、左右、下
margin: 1rem 2rem; // 上下、左右
margin: 1rem; // 全方向

これに当てはめると、margin:0 auto;は「上下の余白を0、左右の余白をauto」にしているという意味だと分かると思います。

なぜautoで中央に配されるのか

横の余白がautoになっていると、ボックスは「左右どちらもautoになってるから左右の余白を自動で計算しよう」と判断して、平均的な場所＝いわゆるセンターにボックスが配されるというわけです。

つまり、右側だけにautoを指定して他の値を0にした場合は、右側の余白が自動で計算されて要素が左側になり、逆に左側だけにautoを指定すると左側の余白が計算されて右側に要素を配することができます。

text-align:center;との違い

また、要素をセンタリングするプロパティにtext-align:center;がありますが、これはspanやimgといったインライン要素に使えるものなので、divやpなどのブロックレベル要素には使うことができません。

ブロックレベル要素にはmargin:auto;、インライン要素にはtext-align:center;を使うようにしましょう。

margin:0 auto;が効かないとき

margin:0 auto;でセンタリングするには条件が揃っている必要があります。もし使えないときは下記の点に注意しておきましょう。

• imgやa、spanなどインライン要素に指定している。
• divなどにwidthが指定されていない。
• floatプロパティが指定されている。
• positionにabsoluteやfixedが指定されている。

さいごに

margin:0 auto;は呪文のように使われていますが、そもそも上下の余白を指定しないのであれば、margin:auto;でも使えますし、余白を指定するのであればmargin:2rem auto;などもできます。

たまに下記のようなコードを見かけますが、素人っぽくなるだけでなく管理も複雑になるので注意しておきましょう。

div {
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  width: 10rem;
  height: 10rem;
  background: #000000;
}

んー非常に分かりにくい…。