绝对定位子元素在flex容器中“跑偏”是因为其脱离flex格式化上下文，不响应对齐属性且只认最近已定位祖先；必须给flex父容器设position: relative作为锚点，并配合transform: translate(-50%, -50%)实现居中，同时确保容器有足够高度。
为什么绝对定位子元素在Flex容器里“跑偏”
因为 position: absolute 元素彻底脱离 Flex formatting context，不响应 justify-content、align-items，也不占据空间。它只认最近的已定位祖先（position: relative / absolute / fixed），而这个祖先往往不是你预期的 Flex 容器——如果没显式设置，它会一路回溯到 ，导致位置飘走。
必须给Flex父容器加 position: relative
这是所有修复的前提，否则后续所有 top / left 都失去锚点。
- 直接在 Flex 容器上加
position: relative，它本身不脱离文档流，不影响其他子项布局 - 避免在同级或上级元素意外设置
position: relative或transform（如transform: translateZ(0)），它们会抢走定位上下文 - 用开发者工具检查 computed 的
position和containing block，确认参考对象确实是当前 Flex 容器
top: 50% + left: 50% 不等于居中
这两个值只是把元素左上角挪到父容器中心点，视觉上必然偏右下。必须配合 transform: translate(-50%, -50%) 才能以自身宽高为基准回拉。
-
transform的百分比是相对于元素自身尺寸，动态宽高下依然可靠 - 不要写成
transform: translate(-50px, -50px)—— 固定像素无法适配变化的尺寸 - 若需兼容 Safari iOS 14.5 以下，避免单独依赖
inset: 0; margin: auto
Flex容器高度为0时，所有定位都失效
如果 Flex 容器内部只有 position: absolute 子项，且没设 height / min-height，它的实际高度就是 0。此时 top: 50% 的 50% 是 0，元素会贴顶；inset 也无从生效。
- 给 Flex 容器加
min-height: 200px（或具体值）确保有可计算高度 - 或用伪元素撑开：
::after { content: ""; display: block; height: 1px; } - 检查 computed height 是否为 0 —— 这是定位失效最常被忽略的底层原因
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
