[CSSレイアウト] 親ブロックの中でコンテンツ幅の子ブロックを中央揃えする

親ブロックの中でコンテンツ幅の子ブロックを中央揃えする

ブラウザ幅の親ブロック「mainタグ」の中で、コンテンツ幅(例:600px)の子ブロック「div.wrapperタグ」を中央揃えしたレイアウトの例です。

ウィンドウが小さく見づらい場合はそれぞれのCodePenのページを開いてください。
ウィンドウ右上の以下の表示をクリックするとページ遷移します。

See the Pen レイアウト練習(ブラウザ幅とコンテンツ幅:回答編) by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

レイアウト実現のポイント

コンテンツ幅を指定する

ブロック要素の横幅は、親ブロックの横幅100%が初期値であり、
親ブロックと全く同じ横幅であるためそのままだと中央揃えができません。
中央揃えのためにwidth、もしくはmax-widthのプロパティを使って横幅を指定しましょう。

ブロックの中央揃えのおまじない「margin: 0 auto;」を指定する

親ブロックの中で子ブロックを中央揃えするには、中央揃えのおまじない「margin: 0 auto;」を指定しましょう。
またプロパティ「margin」は上記のように値を複数まとめて記述することができ、これをショートハンドといいます。

marginのショートハンドの例

1. margin: ABCD;と値が1つの場合・・・「AC=上下左右方向(同値)」
2. margin: AC BD;と値が2つの場合・・・「AC=上下方向(同値)」「BD=左右方向(同値)」
3. margin: A BD C;と値が3つの場合・・・「A=上方向」「BD=左右方向(同値)」「C=下方向」
4. margin: A B C D;と値が4つの場合・・・「A=上方向」「B=右方向」「C=下方向」「D=左方向」

[コーディングの基礎]「margin」と「padding」