在很多高度不固定的网页中，当内容高度足够用一屏进行展示时，不会出现滚动条，而当内容高度高于一屏时，浏览器右侧就会出现滚动条。滚动条的宽度会影响页面的可用宽度，这时候，使用 margin: 0 auto; 来居中的元素就会导致 margin 的自动变化，从而引起元素位置的抖动。
要想解决抖动问题，让元素在有无滚动条的条件下都处于同一个位置，有几种解决办法。
1. 使用 overflow：scroll 解决
Html:{
overflow-y:scroll;
}
这种方法让内容高度无论是否超过一屏滚动条始终都会出现，这样就不存在滚动条出现前后可用宽度不统一的问题，也就不会造成 margin 的自动变化引起元素位置抖动。
很多人不喜欢在不需要滚动条时多出来一个滚动条，就要用到第二种方法了。
2.使用 calc 解决
Html{
padding-left: calc(100vw - 100%);
}
这种方法使用 calc 计算出一个滚动条的宽度，用 margin 或者 padding 占用，其中 100vh 是包括滚动条宽度的浏览器内部宽度，100% 则是实际可用宽度。在出现滚动条时，相当于左右两侧都出现了滚动条宽度，从而使水平居中的元素仍然保持水平居中。
参考链接：
网友评论