align-items: center在移动端不生效的根本原因是父容器交叉轴（垂直方向）无可用长度，需确保父容器有明确可计算的高度，如使用height: 100dvh并降级fallback，避免直接在body设flex、漏写高度或依赖min-height: 100vh。
align-items: center 为什么在移动端不生效
不是 Flex 写错了，是父容器交叉轴（垂直方向）没长度。align-items: center 依赖可计算的交叉轴尺寸，而移动端常见塌陷场景包括：body 直接设 display: flex（iOS Safari 和微信 X5 内核会忽略）、父容器漏写高度、用了 min-height: 100vh 却误以为它能提供对齐所需的空间。
常见错误现象：DevTools 里看到父容器高度是 0px 或远小于视口；子元素紧贴顶部不动；写了 align-items: center 但毫无反应。
- 别用
min-height: 100vh当作对齐依据——它只保底，不提供交叉轴长度 - 避免在
<body>上直接写display: flex，老版本 Safari 和 X5 内核兼容性差，应包一层<div class="modal-root"> - 检查祖先链是否都设了
height: 100%或显式高度，否则height: 100vh可能因继承链断裂而失效
移动端必须用 100dvh 而不是 100vh
iOS Safari 地址栏收放、Android 键盘弹出时，100vh 会跳变（比如从 812px 突然缩到 600px），导致弹窗“上蹿下跳”。100dvh 是动态视口单位，Chrome 120+、Safari 17.4+、Firefox 115+ 已支持，是当前唯一可靠的全屏高度基准。
稳妥写法是降级 fallback：height: 100vh; height: 100dvh;（后者覆盖前者）。老版本 Safari（如 iOS 15.6）需 JS 补偿：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.style.height = window.innerHeight + 'px';
window.addEventListener('resize', () => {
document.documentElement.style.height = window.innerHeight + 'px';
});
- 键盘弹出时 Android 的
resize事件可能不触发，需监听keyboarddidshow（WebView 专用）或用visualViewportAPI - 微信 Android（X5 内核）初次渲染可能漏掉
align-items，加min-height: 1px到父容器可强制重算交叉轴尺寸
子元素用了 position: absolute 就别指望 Flex 居中
position: absolute 元素已脱离文档流，不再是 Flex 项目，justify-content 和 align-items 对它完全无效。这不是 bug，是规范行为——它根本不在 Flex 的作用范围内。
典型场景：蒙层上的关闭按钮、带箭头的 tooltip、自定义弹窗浮层。此时应改用 position: relative + transform: translate(-50%, -50%) 组合：
- 父容器必须设
position: relative - 子元素设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - IE11 需加前缀：
-ms-transform: translate(-50%, -50%)
混用 margin: auto 或 transform 与 Flex 会冲突，尤其在 IE10–11 中 margin: auto 垂直方向支持不完整。
justify-content 和 align-items 必须同时写
默认 flex-direction: row 下，justify-content: center 控制水平（主轴），align-items: center 控制垂直（交叉轴）。只写一个只能单向居中：
- 只写
justify-content: center→ 水平居中，垂直仍为flex-start（贴顶） - 只写
align-items: center→ 垂直居中，水平仍为flex-start（贴左） - 误写
align-content: center→ 单行 Flex 完全无效，它只在flex-wrap: wrap且多行时起作用
嵌套两层时，中间容器也得设 display: flex + 这两个属性；它们只对直接子元素生效，不穿透。
最容易被忽略的是：父容器高度不是“有没有”，而是“能不能被浏览器准确计算”。哪怕只漏掉一行 margin: 0 或一个未设高的祖先，align-items 就会静默失效——它不报错，也不警告，只是不居中。
