舉個(gè)例子
<style>
</style>
<p id="main">
設(shè)置塊級(jí)元素的 width 可以防止它從左到右撐滿整個(gè)容器旷痕。然后你就可以設(shè)置左右外邊距為 auto 來使其水平居中碳锈。元素會(huì)占據(jù)你所指定的寬度，然后剩余的寬度會(huì)一分為二成為左右外邊距欺抗。
唯一的問題是售碳，當(dāng)瀏覽器窗口比元素的寬度還要窄時(shí)，瀏覽器會(huì)顯示一個(gè)水平滾動(dòng)條來容納頁面绞呈。讓我們?cè)賮砀倪M(jìn)下這個(gè)方案...
<p>
這個(gè)的結(jié)果會(huì)怎樣呢贸人？文字會(huì)布滿整個(gè)頁面，如圖
image.png
問題在于人們一般不喜歡這么寬的文字佃声，那么這么改艺智。
<style>
#main {
width:600px;
}
</style>
結(jié)果如圖。左邊邊距沒了圾亏。右邊有邊距還是不太協(xié)調(diào)十拣。
image.png
<style>
#main {
width:600px;
margin:0 auto;
}
</style>
此時(shí)結(jié)果。左右邊距相等了志鹃，比較協(xié)調(diào)夭问。
image.png
還有個(gè)問題，這么做會(huì)使的瀏覽器縮小時(shí)出現(xiàn)進(jìn)度條曹铃。再繼續(xù)改缰趋。
#main {
max-width: 600px;
margin: 0 auto;
}
