父容器必须有可计算的交叉轴空间，移动端居中失败八成因垂直方向无高度；align-items: center仅在交叉轴有可用空间时生效，推荐min-height: 100dvh并确保子元素未脱离flex流。
父容器必须有可计算的交叉轴空间
移动端页面居中失败，八成是因为父容器在垂直方向上没高度。align-items: center 不是魔法，它只在交叉轴（默认为垂直方向）有可用空间时才分配位置。如果父容器高度塌陷为 0px，就算写了 align-items: center，子元素也只会贴在顶部。
推荐写法：min-height: 100dvh，而不是 height: 100vh。iOS Safari 和部分 Android 浏览器在地址栏展开/收起时会动态改变视口高度，100vh 会跳变，而 100dvh 是动态视口单位，能响应这种变化。
- 若父容器是
，记得同步设html, body { height: 100%; margin: 0; }，否则100dvh在某些嵌套结构下可能失效 - 避免用
height: 100%，它依赖父级高度，容易断链 - 调试时打开浏览器开发者工具，看 computed 样式里父容器的
height和min-height是否真为非零值
子元素不能脱离 Flex 上下文
常见错误：给子元素加了 position: absolute 或 float: left，结果 justify-content 和 align-items 完全失效——因为该元素已退出 Flex 流，不再被视为弹性子项。
移动端常用于弹窗、加载指示器、Logo 居中等场景，这些元素往往被误加绝对定位。如果确实需要脱离文档流（比如遮罩层），请把 position: relative 加在父容器上，子元素保持普通块级或 display: block 即可。
-
display: inline元素（如<span></span>）默认不是 flex item，需显式设display: block或display: inline-block -
margin: auto在单子元素的 flex 容器中有效，但和justify-content/align-items混用可能冲突，建议二选一 - 子元素设了
flex-grow: 1会先撑满容器，导致align-items: center失去“剩余空间”可分配
flex-direction 改变后对齐属性作用方向互换
移动端导航栏折叠时常用 flex-direction: column，此时主轴变为垂直方向，justify-content: center 就控制垂直居中，而 align-items: center 反过来控制水平居中。很多人死记“justify 是水平、align 是垂直”，一换方向就出错。
真正可靠的理解方式：主轴由 flex-direction 决定，justify-content 永远管主轴，align-items 永远管交叉轴。
- 默认
flex-direction: row→ 主轴水平 →justify-content水平，align-items垂直 - 改成
flex-direction: column→ 主轴垂直 →justify-content垂直，align-items水平 - 响应式切换时，别只改
flex-direction，顺手检查justify-content的语义是否还匹配当前主轴
IE10–11 兼容性与 fallback 方案
虽然现在绝大多数移动端环境（Chrome、Safari、Firefox）都完美支持 display: flex + align-items: center，但如果你的项目仍需兼容 IE10–11，要注意它们对 align-items: center 在某些场景下的 bug：比如子元素是 <table>、或设置了 <code>min-height、或父容器用了 overflow: hidden，可能导致垂直居中偏移或失效。
稳妥做法不是降级回绝对定位，而是加一层轻量 fallback：
- 用
@supports (display: flex)包裹 flex 方案，不支持时退回到display: table-cell+vertical-align: middle组合 - 避免在同一个规则里混用
position: absolute和display: flex，IE 下行为不可控 - 真要支持旧 IE，优先考虑用 JS 动态计算并设置
top/left，比 CSS hack 更可控
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
