CSSでdiv要素を中央に揃える（margin: 0 auto）

parent クラスの中に child クラスがあり、child クラスを中央に揃えたいときは次のようにする。

.parent {
}
.child {
margin: 0 auto;
width: 960px;
}

子要素の margin に 0 auto を設定する。0 と auto は半角スペースを入れる。子要素の width は設定しなくてもいい。

ポイント

text-align を使わない。text-align を center にすると、子要素の子要素（孫要素）も中央揃えになり、そこに含まれる p タグなどもいっせいに中央に揃えられる。

打ち消しの css を書かないためにも、text-align は文字列の中央揃え以外ではなるべく使わない。

例

.page {
margin: 0 auto;
max-width: 960px;
width: 100%;
}

max-width をピクセル単位の数値、width を 100% に設定するとスマホ対応になる。