■ページ全体をセンタリング■
ページ全体をセンタリングするには、marginプロパティを使用します。
marginプロパティはボックス要素のマージン(余白)を設定するためのプロパティですが、
値に「auto」を設定すると状況に応じてマージンのサイズが自動的に調整されるようになります。
例えば、左右のmarginをautoに設定すると左右のマージンは同じサイズになります。
ということは、結果としてそのボックス要素がセンタリングされることになります。
まあ、簡単にいうとページ全体を囲んでいるボックス(この場合div)に対して「margin: 0 auto」
を設定してあげると、ページ全体の左右のマージンが同じサイズになり、結果的に中央表示されるようになるというわけです。
ちなみに「margin: 0 auto」となっていますが、左の「0」の部分は上下のマージンです。
横の「auto」が左右のマージンとなっています。
なのでこの場合「0」でなくても大丈夫です。
あと左右のマージンが「auto」になっているので、ブラウザ(ウィンドウ)がどんなサイズになっても常にページ全体は中央表示(センタリング)されます。