margin 0 autoを使いこなそう

margin 0 autoとは、ブロック要素を中央揃えにする際に使用されるCSSです。 Webサイト構築では頻繁に使われるスタイル指定なので、使いこなせるようになっておきましょう。

あらかじめエディタに書くコード

                    <div class="box"></div>
¥HTML¥
                

                    .boxs {
  width: 500px;
  border: 2px solid black;
}

.box {
  background: white;
  border: 2px solid black;
  text-align: center;
  height: 100px;
  width: 100px;
}
¥CSS¥
                

期待する画面

margin 0 autoとは

margin 0 autoをブロックレベル要素にあてることで、中央寄せにすることができます。
注意点としては、marginはブロックレベル要素にしか適用することができないということです。
インライン要素に指定しても効果はありません。

margin 0 autoの「0」は上下方向の余白を「0」に指定しています。

margin 0 autoの「auto」は、左右方向の余白をauto（左右を同じ大きさになるように自動計算）に指定しています。