滚动条导致页面偏移
问题描述
水平居中的元素因为纵向滚动条的出现，导致位置出现了偏移
问题重现
水平居中元素因为横向滚动条的出现和隐藏产生偏移（点击蓝色按钮可以看到效果）
水平居中通过 margin:0 auto; 实现
水平居中通过 display: flex;justify-content: center; 实现
问题原因
上面的居中是相当于视口的居中，而 win 的滚动条是需要占据视口宽度的（mac 滚动条默认不占据视口宽度）。因此当滚动条出现，那么视口就变窄了，那么原来居中元素的位置也需要重新调整
问题解决
方案一：让滚动条一直出现
简单粗暴，只要大家能接受。
原理： 既然是因为视口宽度变化导致的居中元素位置发生了偏移，那让视口宽度不变不就好了
方案二：动态计算 margin-left
方案三：动态计算滚动条宽度
方案四：不使用浏览器默认滚动条
如：采用 el-scroll 这种 js 模拟浏览器滚动条的方案