Flex容器内absolute子元素不居中，因脱离flex流致justify-content/align-items失效；需父容器设position: relative，再用top:50%、left:50%配合transform: translate(-50%,-50%)实现精准居中。
Flex容器里子元素设了position: absolute却不居中？
因为position: absolute会让元素完全脱离flex布局的控制流，justify-content和align-items对它彻底失效。此时它只认最近的定位上下文（比如父容器的position: relative），然后按top/left等偏移计算位置——而这些值默认是相对于父容器左上角的，不是中心。
top: 50% + left: 50% 为什么只是“偏了一半”？
这两个声明只是把元素的**左上角**挪到父容器中心点，不是让整个元素视觉居中。常见现象：元素右下角伸出视口、看起来明显偏右偏下。
- 必须补上
transform: translate(-50%, -50%)，才能以自身宽高为基准，向左、向上各回拉一半 - 如果漏掉
transform，哪怕父容器是display: flex也毫无作用 -
transform的百分比是相对于元素自身尺寸，不是父容器——所以宽高动态变化时依然可靠
Flex容器本身加position: absolute会怎样？
这是典型的概念混淆：flex容器的作用是排布它的子元素，它自己是否居中，得由它的父容器决定。给flex容器自己加position: absolute，等于主动放弃flex带来的布局能力，还可能引发z-index、层叠上下文等额外问题。
- 想让一个flex容器（比如
.box）在页面中居中？应该操作它的父容器，而不是它自己 - 父容器用
display: flex+justify-content: center+align-items: center最干净 - 若父容器已用
position: relative，且需要脱离文档流（如弹窗），再对flex容器设position: absolute+transform
移动端用height: 100vh居中会错位？
iOS Safari地址栏收起/展开时，100vh不会实时响应，导致align-items: center计算出的位置偏移。这不是flex或transform的问题，而是viewport高度不稳定。
- 优先改用
min-height: 100dvh，现代浏览器支持良好，能响应地址栏变化 - 老iOS需降级方案：监听
resize事件+JS动态设高度，但多数项目用padding-top: env(safe-area-inset-top)加一点容错更实际 - 别依赖
zoom或user-scalable=no来“修复”，这会破坏可访问性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
