justify-content 和 align-items 对绝对定位子元素无效，因为 position: absolute 使元素脱离文档流、不再属于 flex 项目，无法参与 flex 布局计算；其定位仅依赖最近的定位祖先及 top/left/transform 等属性。
为什么 justify-content 和 align-items 对绝对定位子元素无效
因为绝对定位元素已脱离文档流，不再是 flex 项目——justify-content 和 align-items 只作用于参与 flex 布局的直接子项，而 position: absolute 让元素完全退出 flex 的计算和分配逻辑。
绝对定位元素在 flex 容器里“看起来居中”但实际没走 flex 流程
即使父容器设置了 display: flex; justify-content: center; align-items: center，对 position: absolute 子元素也毫无影响。它只会按常规绝对定位规则渲染：以最近的 position: relative 祖先为参考，然后由 top/left 或 transform 决定位置。
- 若父容器没设
position: relative，它会相对于视口定位，导致“居中”错位 - 若只写
top: 50%; left: 50%，元素左上角在中心，不是整体居中 - 正确做法是补上
transform: translate(-50%, -50%)，但这和 flex 无关
想用 flex 居中？那就别用 position: absolute
两者本质冲突：flex 居中靠布局算法自动分配空间；绝对定位靠手动坐标控制。混用会导致预期失效，且调试困难。
- 移除子元素的
position: absolute，改用 flex 原生方案（如margin: auto或双center） - 如果必须用绝对定位（比如遮罩层、气泡提示），就放弃
justify-content/align-items，改用top/left+transform组合 - 注意：
align-self对绝对定位元素也无效，它只对 flex 项目起作用
容易被忽略的嵌套干扰：父容器有 position: relative 但子元素仍不居中
这不是 flex 的问题，而是绝对定位的层级参照出了偏差。常见于：
- 父容器虽有
position: relative，但高度为0或未显式设置（比如仅靠内容撑开），导致top: 50%计算基准错误 - 中间某层祖先意外加了
position: relative，成了新的定位上下文，使子元素不再相对于 flex 父容器定位 - 使用了
transform的祖先元素（如scale或rotate），可能改变定位参考系，在部分浏览器中表现异常
真正卡住的地方，往往不是 flex 写错了，而是你一边想用 flex 的语义化居中，一边又用绝对定位强行接管位置控制——它们不共存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
