通常設計師在設計PC端網頁時會將頁面主要的信息內容置于頁面中間的1200px范圍內，這1200px也就是俗稱的版心了。這是網頁設計的規則之一，目的是幫助前端制作PC端的頁面自適應。目前市面上主流的屏幕分辨率是1920*1080，此外還有1440*900以及1680*1050等等。而設計師一般給出的設計圖都是1920*1080版的。

如果完全將網頁完全按設計圖還原，不做自適應，遇到小屏時就會出現網頁顯示不全需要用戶移動頁面底端滑條才能看到完整網頁內容的情況。這會讓用戶體驗極差。百度所用的方法是讓內容靠右，已達到最大限度的展示所有內容。但對于其他以內容展示為目標的網站，讓用戶一直扭著脖子觀看實在不妥。

所以我們還是老老實實居中吧。

說起來也是很簡單，寫頁面時可以將先建立一個寬度自動跟瀏覽器寬度一致即width：100%的盒子。然后再在這個盒子中放入一個固定寬度1200px的盒子，將其居中position：relation；margin:0 auto;在將內容寫在這個1200px的盒子中即可。

這時候就有人要問很多時候設計師會在超過版心的地方設計有裝飾插畫，且大部分背景圖片也超過1200px又該怎么辦。這時候就要用到外面那個寬度100%的大盒子了。我們可以把背景圖片非平鋪居中置于大盒子中。這里還要注意記得給大盒子寫入最小寬度為1200px,以保證不會因為瀏覽器被調節寬度過小而導致背景圖型變。而小面積超出版心的裝飾插畫放置是也應該基于版心利用相對位置放置，已達到最大程度的適應瀏覽器大小去展示頁面最主要內容。

最后這兩端代碼編譯后就能很直觀的展示這篇文章所說的事情

無自適應居中

.content{

width: 1920px;

height: 600px;

background: #adf;

}

.cont{

width: 1200px;

height: 600px;

position: absolute;

left: 360px;

background: #FD3800;

}

有自適應居中

.content{

width: 100%;

min-width: 1200px;

height: 600px;

background: #adf;

}

.cont{

width: 1200px;

height: 600px;

margin: 0 auto;

background: #FD3800;

}