レスポンシブデザインで中央揃えに表示する方法

PCなどの大きいサイズのスクリーンの場合は、サイトの表示位置を中央にして左右に余白を作るといったデザインをよく見かけると思います。このような場合は、widthを使ってpxでサイト幅を固定すれば、中央に表示させることができますが、レスポンシブWebデザインの対応をする場合には、幅を固定して作るのはあまりよくないですし、スマホやタブレットなどはスクリーンサイズが小さいので、幅を100%にしてなるべく多くの情報を見せたいと思います。しかし、幅を100%にしてしまうと今度はPCで表示したときに横幅いっぱいに広がり、画面中央に表示されなくなってしまいます。
そこで、使うのが「max-width」というセレクタです。ここに実際に表示させたいサイト幅を指定してあげれば、PCでは中央揃えで表示され、スマホやタブレットでは横幅いっぱいに表示されるようになります。実際のソースはざっくり以下のような感じになります。

<div id="container">
  <div id="main">
  コンテンツ内容
  </div>
</div>

#container {
  max-width: 960px;
  margin: 0 auto;
}
#main {
  width: 100%;
}

• DEMO

以上が、レスポンシブデザインをする際にボックスを中央揃えに表示する方法となります。