margin: auto; 

#main {
  width: 600px;
  margin: 0 auto; 
}
<div id="main">

ブロックレベル要素のwidthを設定すると、要素のコンテナが左右に引き延ばされなくなる。また、左右のマージンをautoにすると、左右中央に要素を配置できる。要素のwidthは設定した値になるから、残りのスペースは左右のマージン間で均等に分配される。

ただし、ブラウザの幅が要素の幅より狭くなると、問題が起こってしまう。ブラウザは、水平スクロールバーを生成して解決しようとしているが。この状況をもっと良くしよう...

</div>
  • Creative Commons License