轉自：
鏈接:http://caibaojian.com/css3-calc-vw.html
來源:http://caibaojian.com
當頁面內容動態加載，開始沒有滾動條，內容增多後出現滾動條，這時使用固定寬度居中對齊佈局會向左偏移一個滾動條寬度。解決方法可以給內容全部添加overflow-y:scroll;或者是根據內容用css填充好再補充內容。本文介紹的是calc來計算滾動條寬度，當有滾動條時，內容外部也給它模擬一個滾動條寬度，因而就不會偏移了。
很簡單，只要一行代碼就搞定了：
.wrap-outer {
margin-left: calc(100vw - 100%);
}或者：
.wrap-outer {
padding-left: calc(100vw - 100%);
}然後就可以慶祝放鞭炮啦！！
首先，.wrap-outer指的是居中定寬主體的父級，如果沒有，創建一個（使用主體也是可以實現類似效果，不過本着寬度分離原則，不推薦）；
然後，calc是css3中的計算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；
最後，100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。
於是，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（如果有，如果沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被佔用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動！