抖动根源是布局偏移（cls），非居中方式本身；需显式声明宽高、补滚动条宽度、设transform-origin与will-change、避免强制重排。
居中本身不会抖，抖的是居中过程中因尺寸突变、滚动条切换或重排触发的布局移动（CLS）。关键不是“怎么居中”，而是“居中时如何不让浏览器重算布局”。
margin: 0 auto 居中为什么一加载就跳
根本原因是元素没写 width，或者写了但值依赖图片加载后才确定。浏览器首帧按 0×0 或默认行内尺寸占位，margin: 0 auto 失效；等图片载入、高度撑开，整个块突然下移，下方内容全被顶下去。
- 必须显式声明
width和height（哪怕只是占位值），不能只靠 CSS 的max-width: 100%或aspect-ratio -
img标签务必带内联width和height，例如<img src="x.jpg" style="max-width:90%" style="max-width:90%"> - 如果用
flex或grid居中父容器，子元素仍可能因内部图片未占位而抖——抖源在子元素，不在居中方式
Flex/Grid 居中时 hover 缩放闪一下
不是居中逻辑错，是 transform 动画没配对好：原点偏移 + 缺少缓动 + 合成层缺失，导致缩放帧率不稳、像素对齐失败。
- 必须加
transform-origin: center center，否则不同元素缩放中心不一致，快速悬停切换时视觉跳帧 - 过渡函数不能只写
transition: transform 0.2s，要明确写transition: transform 0.2s ease（或cubic-bezier(0.34, 1.56, 0.64, 1)） - 加上
will-change: transform，让浏览器提前创建独立图层，避免主线程反复合成 - 父容器记得设
overflow: hidden，防止缩放溢出引发外层重排
模态框弹出后页面整体左移
这不是居中失效，是 body 滚动条消失导致可用宽度突增。所有靠 margin: 0 auto 或 justify-content: center 居中的元素，都会跟着向左偏移。
- 别用
body { overflow: hidden }粗暴禁用滚动条——它只隐藏条，不锁宽度 - 正确做法：先读
document.body.offsetWidth，再设document.body.style.overflow = 'hidden'，再读一次，差值即滚动条宽度 - 用
document.body.style.marginRight = '${scrollBarWidth}px'补回腾出的空间 - 关闭模态框时，必须同时清掉
marginRight和overflow，否则后续页面滚动异常
绝对定位居中元素在滚动时晃动
常见于 position: fixed 元素嵌在局部滚动容器（如 el-scrollbar、scroll-view）里——它的定位基准被截断，浏览器不断修正位置，表现为高频抖动。
- 把
position: fixed元素直接挂到document.body下，脱离局部滚动上下文 - 若必须保留在容器内，改用
position: sticky（注意 IE 不支持） - iOS Safari 中，可用
transform: translateY()+requestAnimationFrame手动同步滚动偏移，模拟固定效果 - 避免在
scroll回调里频繁读getBoundingClientRect()或offsetTop，这会强制重排，放大抖动
真正难处理的抖动，往往藏在第三方组件的 mounted 钩子里：它们悄悄读 clientHeight 却没防抖。这时候得打开 Chrome DevTools 的 Performance 面板，录一段滚动，看 Layout 事件是否密集爆发——抖动从来不是你写的那几行居中代码，而是结构里没被约束的尺寸信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
