CSS 佈局 - width 和 max-width
使用 width, max-width 和 margin: auto;
正如上一章提到的；塊級元素總是佔用可用空間的全部寬度（向左和向右延伸到最大）。
設定塊級元素的 width 會阻止它延伸到其容器的邊緣。然後，你可以將 margin 設定為 auto，在容器內水平居中該元素。該元素將佔用指定的寬度，剩餘的空間將在兩個 margin 之間平均分配。
這個 <div> 元素具有 500px 的寬度，並將 margin 設定為 auto。
注意： 上面 <div> 元素的問題發生在瀏覽器視窗小於元素寬度時。此時瀏覽器會在頁面上新增一個水平捲軸。
在這種情況下，使用 max-width 代替，將改善瀏覽器對小視窗的處理。這對於使網站在小裝置上可用非常重要。
這個 <div> 元素的最大寬度為 500px，並將 margin 設定為 auto。
提示： 將瀏覽器視窗寬度調整到小於 500px，以檢視這兩個 div 之間的區別！
下面是上面兩個 div 的示例
示例
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
自己動手試一試 »
