現在大多數頁面都是采用主體內容水平居中布局
但是，這種布局存在一個問題。現在的瀏覽器滾動條默認是overflow:auto類型的，也就是說如果內容高度不足一屏，沒有滾動條；如果超出才會出現滾動條。於是，問題來了：
- 信息流頁面，如新浪微博，是從上往下push渲染的。開始只有頭部一些信息加載，此時頁面高度有限，沒有滾動條；然后，更多內容顯示，滾動條出現，占據可用寬度，
margin: 0 auto主體元素自然會做偏移——跳動產生。 - JS交互，本來默認頁面高度不足一屏，結果點擊了個“加載更多”，內容超過一屏，滾動條出現，頁面主體就會左側跳動。
- 結構類似幾個頁面通過頭部的水平導航刷新切換，結果有的頁面有滾動條，有的沒有。造成的結果就是，導航怎么跳來跳去！
現在有以下三種方法解決這一問題：
1、讓瀏覽器的垂直滾動條一直顯示：body { overflow-y: scroll; }
2、當內容高度超過一屏時，在瀏覽器左側同時加上一個滾動條寬的的padding或margin。
.wrap-outer { margin-left: calc(100vw - 100%); }
或
.wrap-outer { padding-left: calc(100vw - 100%); }
注 ：
1、.wrap-outer指的是居中定寬主體的父級。
2、calc是CSS3中的計算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；
3、100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。
於是，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（如果有，如果沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被占用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動！
項目中，最終代碼：
https://blog.csdn.net/zh_rey/article/details/77531224?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242