flex居中失效的根本原因是父容器高度为0，必须设置min-height:100dvh或显式高度，并重置body外边距；ios safari需用dvh避免地址栏导致的viewport跳变；子元素脱离文档流则flex属性失效。
父容器没高度，Flex居中就是摆设
直接写 display: flex + justify-content: center + align-items: center 在移动端大概率失效——不是代码错，是父容器实际渲染高度为 0。Flex 的 align-items: center 必须依赖交叉轴（垂直方向）有可计算尺寸，而移动端常见场景下：body 或包裹层没设高、内容又短，容器就塌了。
- 必须给父容器加
min-height: 100vh或明确高度（如min-height: 400px） - 若父容器是
body，务必重置默认外边距：body { margin: 0; } - 避免只对空
div套 Flex 居中声明——它没内容撑高，也没显式设高，结果元素贴顶
iOS Safari 中 100vh 动态跳变，该用 dvh
iOS Safari 在页面滚动时会动态调整地址栏高度，导致 100vh 瞬间缩水，Flex 容器“塌缩”，居中偏移。这不是 CSS 写错了，是浏览器行为。
- 优先用
min-height: 100dvh（dynamic viewport height），Chrome 105+ / Safari 16.4+ 支持，始终反映当前可视区域高度 - 兼容老版本：用 JS 注入真实高度：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，再在 CSS 中写min-height: calc(var(--vh, 1vh) * 100) - 别用
position: absolute+top: 50%回退——它无法响应字体缩放、动态字号等可访问性需求
多行文本/图标居中，flex-direction 很关键
一个 div 里含 h2 和 p，要它们整体垂直居中但内部文字左对齐——只写 justify-content: center 会让文字也水平居中，这是方向没理清。
- 父容器设
flex-direction: column，此时justify-content: center控制子元素在纵轴上的分布位置 - 加
align-items: flex-start让每段文字自身左对齐，而不是继承父级的居中行为 - 如果子元素是多个
p或span，别用text-align: center“模拟”垂直居中——它是水平属性，对垂直无影响
子元素脱离文档流，Flex 居中就失效
Flex 居中只对直接子元素（即 flex item）生效。一旦子元素被 position: absolute 或 float 脱离文档流，它就不再是 flex item，justify-content 和 align-items 对它完全无效。
- 检查子元素是否写了
position: absolute、position: fixed或float - 避免在子元素上同时用
margin: auto和 Flex 居中——可能产生冲突 - 导航栏里常见错误：
nav > a { align-self: flex-end; }会覆盖父级align-items: center，应删掉或改为align-self: center
真正卡住人的往往不是 Flex 属性本身，而是父容器的高度来源是否稳定、是否被 viewport 变化干扰。尤其在 iOS 上，dvh 不是锦上添花，而是刚需。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
