flex + justify-content: center 在 resize 下可靠，前提是父容器宽度自然撑满或显式设为100%、无float/absolute干扰，且高度可控；否则可能左对齐或失效。
视口缩放或尺寸变化时，元素依然水平居中——这事不靠“监听 resize 事件”解决，而是靠 CSS 本身的响应式机制。只要选对方案，resize 是自动生效的；选错，反而会出偏移或跳动。
flex + justify-content: center 在 resize 下是否可靠？
可靠，但前提是父容器高度/宽度行为没被干扰。
- 必须写在父容器上：
display: flex和justify-content: center，不是子元素自己加 - 父容器宽度要是「自然撑满」或显式设为
width: 100%；如果父容器被max-width或浮动限制了实际宽度，子元素就只在那个窄范围内居中 - 避免父容器同时用了
float或position: absolute——这会让 flex 失效，resize 后可能突然左对齐 - 移动端双指缩放（pinch-zoom）下，
justify-content: center仍有效，但要注意viewportmeta 是否禁用了缩放（如user-scalable=no）
margin: 0 auto 在 resize 时为什么会偏移？
不是它本身失效，而是它的三个前提在动态场景里容易被悄悄破坏。
- 元素必须有明确
width：用width: 80%没问题，但width: auto或未声明 width 就直接失效 - 不能是
display: inline或inline-block（除非额外设display: block） - 父容器不能是
display: flex或display: grid——此时margin: 0 auto被忽略，resize 后看起来“突然不居中” - 常见翻车点：媒体查询里改了子元素
width却忘了同步更新，或者 JS 动态删了 class 导致 width 回退到 auto
position: absolute + left: 50% + transform: translateX(-50%) 的 resize 表现
这是目前对 resize 最鲁棒的方案，尤其适合模态框、提示气泡这类脱离文档流的元素。
立即学习“前端免费学习笔记（深入）”；
- 关键在
transform: translateX(-50%)：它基于元素自身当前宽度计算，resize 后浏览器自动重绘，无需 JS 干预 - 父容器必须设
position: relative（或非 static），否则left: 50%会相对于视口而非父容器，滚动+resize 组合下极易跑偏 - 慎用
top: 0或bottom: 0配合这个方案——它们和 resize 无关，但可能掩盖居中失效的问题 - 旧版 Safari（iOS 9–12）需要
-webkit-transform: translateX(-50%)，漏掉前缀会导致 resize 后卡在左边
真正容易被忽略的不是代码怎么写，而是「谁在控制宽度」：是视口？是父容器？还是元素自己？resize 时各层宽度重新计算，只要其中一环没对齐（比如父容器用 max-width 但子元素用百分比 width），居中就会漂移。盯住 computed styles 里的 actual width，比猜更管用。
