margin: auto;

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

設定區塊元素的 width 屬性,可以避免該元素從左到右撐滿容器,然後你可以設定左右外邊距(margin-left 與 margin-right)為 auto 來使其水平居中。元素在顯示的時候,只會顯示到你所指定的寬度,然後剩餘的寬度平均的散落在左右兩邊的邊距上。

唯一的問題是,當瀏覽器視窗寬度比元素的寬度還要窄時,瀏覽器就會出現水平捲軸。讓我們接著來改進這個狀況......

</div>
  • Creative Commons License