align-items: center 在移动端失效，90% 是因父容器交叉轴无高度；需用 height: 100dvh（兼容现代浏览器）、fallback 写法或 JS 补偿，避免直接在 body 上设 flex，推荐 grid place-items 或绝对定位方案。
align-items: center 在移动端失效，先检查父容器高度
Flex 垂直居中失效，90% 是因为父容器交叉轴（垂直方向）没有可计算的高度。移动端常见塌陷场景包括：body 直接设 display: flex（iOS Safari 和微信 X5 内核会忽略）、父容器漏写高度、或误用 min-height: 100vh（它只保底，不提供对齐所需的空间）。
DevTools 里若看到父容器高度是 0px 或远小于视口，就坐实了这个问题。解决方式必须显式赋予父容器一个可计算的垂直尺寸：
- 优先用
height: 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';，并监听resize；但注意 Android WebView 键盘弹出时resize可能不触发，得配合visualViewportAPI - 微信 Android（X5 内核）初次渲染可能漏算交叉轴，加
min-height: 1px到父容器可强制重排
position: absolute + transform(-50%, -50%) 适用于脱离文档流的浮层
当子元素用了 position: absolute，justify-content 和 align-items 就完全无效——这不是 bug，是规范行为：它已脱离 Flex 容器的布局流。
典型场景如蒙层上的关闭按钮、带箭头 tooltip、自定义弹窗浮层。此时应改用定位 + 变换组合：
立即学习“前端免费学习笔记（深入）”；
- 父容器需设
position: relative（或position: fixed用于全屏遮罩） - 子元素设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 无需知道子元素宽高，适合动态内容（如文字长度不定的提示框）
- 注意：iOS Safari 中
transform在某些fixed场景下有渲染抖动，可加will-change: transform;缓解
Grid 的 place-items: center 是更简洁的二维替代方案
如果页面本身已用 Grid 布局，或弹层结构简单（单个子元素），place-items: center 比 Flex 更省代码，且语义更精准——它同时控制块轴和内联轴对齐。
写法极简：
.modal-root {
display: grid;
place-items: center;
height: 100dvh;
height: 100vh;
}
但要注意兼容性边界：
- IE 完全不支持，Edge 16+ 开始支持
- 旧版 Android WebView（如 Android 6-8 系统自带浏览器）需加前缀
-ms-grid-row-align: center; -ms-grid-column-align: center; - 若弹层需滚动内容，
place-items会把整个内容块居中，而非仅初始位置；此时应改用align-content: center+justify-content: center并确保容器有明确高度
别在 body 上直接写 display: flex
很多开发者图省事，在 body 上直接设 display: flex; align-items: center;，结果在 iOS Safari 或微信 X5 内核里完全不生效。根本原因是这些内核对 body 的 Flex 渲染存在历史兼容问题。
稳妥做法是包一层容器：
- HTML 中加
<div class="modal-root"></div>作为弹层根节点 - 给
.modal-root设display: flex或display: grid，并严格控制其高度 -
body保持默认文档流，避免干扰全局样式继承链 - 若需全屏遮罩，用
position: fixed; inset: 0;而非依赖body的 Flex 行为
真正容易被忽略的是祖先链断裂：哪怕写了 height: 100vh，如果中间某层父容器没设 height: 100% 或显式高度，继承就会断掉。移动端尤其敏感，建议逐层 inspect 计算后的 height 值，而不是只看 CSS 声明。
