transform: translate(-50%, -50%) 偏移是因为以元素左上角为基准且依赖动态尺寸；flexbox 居中更稳但需父容器有明确高度；grid 的 place-items: center 对未知宽高最可靠。
transform: translate(-50%, -50%) 为什么总偏一点？
因为 transform 的基准点是元素自身的左上角，不是中心；而 translate(-50%, -50%) 是把左上角往左上各移自身宽高的 50%，结果视觉上确实居中——但前提是元素尺寸已知且稳定。一旦宽高动态变化（比如内容加载、字体加载、响应式折叠），浏览器可能在 layout 阶段还没算出真实尺寸就执行了 transform，导致偏移量错估。
常见错误现象：margin: auto 失效时硬套 position: absolute + transform，结果在 Safari 或低版本 Chrome 中轻微晃动，或文字换行后整体下移。
- 确保父容器有明确的
position: relative（否则absolute子元素会相对于视口定位） - 避免在
display: inline或未设置宽高的span上直接用该方案——它依赖盒模型尺寸 - 如果内容含 Web Font，考虑加
font-display: swap或监听document.fonts.ready后再触发居中逻辑
Flexbox 居中比 transform 更稳的三个条件
Flexbox 不依赖元素自身尺寸，只要父容器设好 display: flex，子元素就能靠 justify-content 和 align-items 居中。但它不是万能的——某些场景下反而更难控。
- 父容器必须有明确高度（比如
height: 100vh或min-height），否则align-items: center可能没效果 - 子元素不能同时设
margin: auto和flex: 1，后者会挤压前者，导致居中失效 - IE11 对
align-items: center在单行文本上的兼容性差，需加line-height或伪元素 hack
示例：一个弹窗居中，父容器是 .modal-overlay { display: flex; justify-content: center; align-items: center; }，子元素 .modal 就不用任何 transform。
立即学习“前端免费学习笔记（深入）”；
未知宽高时，CSS Grid 比 Flexbox 更少意外
Grid 的 place-items: center 本质是同时设置 justify-items 和 align-items，对子元素尺寸完全不敏感，连 inline 元素都能稳稳托住。
- 父容器只需
display: grid; place-items: center;，无需指定行列模板 - 比 Flexbox 更少受外边距合并、基线对齐等干扰（比如
img默认vertical-align: baseline会让 Flex 居中偏下） - 注意 Grid 在 IE 中完全不可用，如需兼容 IE，得降级到
table-cell+vertical-align方案
示例：.card { display: grid; place-items: center; height: 200px; }，里面放一个 <svg></svg> 或 <div>任意文字</div> 都能精准居中。
JavaScript fallback 的两个关键时机点
纯 CSS 方案总有边界，比如需要居中的元素是第三方组件、宽高由 JS 动态注入、或要配合动画做平滑过渡。这时 JS 计算是必要的，但别一上来就 getBoundingClientRect()。
- 优先监听
resize和load（图片/iframe 加载完成），而不是DOMContentLoaded——后者时 DOM 虽就绪，但资源未必 - 避免在
scroll或input中频繁重算，用requestAnimationFrame节流，否则卡顿明显 - 计算前先
offsetParent !== null判断是否已挂载，否则getBoundingClientRect()返回全零
复杂点在于：当父容器本身也在动画中缩放或位移时，transform 偏移必须叠加父级变换矩阵，这时候 CSS 方案反而更可靠——JS 很容易漏掉这一层。
