marginの指定

まず、margin の指定をおさらいします。
margin の指定は以下の通りです。

/* 上下左右に対し一括指定 */
margin: 10px;

/* 上下、左右に対する指定。この場合、上下10px、左右20px */
margin: 10px, 20px;


/* 上、左右、下に対する指定。この場合、上10px、左右20px、下30px */
margin: 10px, 20px, 30px;

/* 上、右、下、左に対する指定。この場合、上10px、右20px、下30px、左40px */
margin: 10px, 20px, 30px, 40px;

autoとは

ブラウザーが適切なマージンを自動で選択して使用します。
よく分からないので実際に確認します。

autoの確認

左にマージン auto

通常何も指定しない場合、左寄せになり、左にはマージンが存在しません。
今回、左にマージンをautoで指定してみます。

HTML

<div class="container">
    <div class="left-margin"></div>
</div>

CSS

.container {
  height: 100px;
  width: 100%;
  outline: 1px solid red;
}

.left-margin {
  height: 50%;
  width: 50px;
  background-color: aqua;
  margin-left: auto;
}

結果

可能な限り左にマージンが発生しているのが確認出来ます。
これは「ブラウザーが適切なマージンを自動で選択して使用」してくれた結果になります。

左と、右にマージン auto

今回は、左だけでなく、右にもマージンautoを指定してみます。

HTML

<div class="container">
    <div class="left-margin"></div>
</div>

CSS

.container {
  height: 100px;
  width: 100%;
  outline: 1px solid red;
}

.left-margin {
  height: 50%;
  width: 50px;
  background-color: aqua;
  margin-left: auto;
}

結果

左と右にautoマージンが指定されているので、ちょうどよく中央になったのかと思います。

margin: 0 auto;とは

上下0、左右をautoに設定しているので、ブロック要素が左右中央になっているというわけです。

HTML

<div class="container">
    <div class="left-margin"></div>
</div>

CSS

.container {
  height: 100px;
  width: 100%;
  outline: 1px solid red;
}

.left-margin {
  height: 50%;
  width: 50px;
  background-color: aqua;
  margin: 0 auto;
}

結果

最後に

特にありません。