align-items: center在移动端不生效90%是因为父容器交叉轴无高度，需确保父容器有明确可计算的高度，如height: 100dvh并降级fallback，避免body设flex、漏写高度或依赖min-height: 100vh。

为什么 align-items: center 在移动端不生效

90% 的情况是父容器交叉轴（垂直方向）没高度，不是写法错了。DevTools 里看到父容器高度为 0px 或远小于视口，就确认了问题根源。

• body 上直接设 display: flex：iOS Safari 和微信 X5 内核会忽略
• 只写 min-height: 100vh：它只保底，不提供对齐所需的确定交叉轴长度
• 用了 position: fixed 却漏设 inset: 0 或 top/bottom/left/right: 0，导致脱离文档流后无尺寸基准
• 子元素用了 position: absolute：它已脱离 Flex 流程，align-items 对它完全无效

用 height: 100dvh 替代 100vh 防抖动

iOS 地址栏收放、Android 键盘弹出时，100vh 会跳变（比如从 812px 突然缩到 600px），弹窗“上蹿下跳”。100dvh 是动态视口单位，Chrome 120+、Safari 17.4+、Firefox 115+ 已支持。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 稳妥写法：height: 100vh; height: 100dvh;（后者覆盖前者）
• 老版 Safari（如 iOS 15.6）需 JS 补偿：document.documentElement.style.height = window.innerHeight + 'px';，并监听 resize 和 keyboarddidshow
• 微信 Android（X5 内核）初次渲染可能漏算交叉轴，加 min-height: 1px 到父容器可强制重排

绝对定位 + transform 更适合浮层类弹窗

当弹窗要脱离文档流、带箭头、或需叠加在 iframe/select 上时，position: absolute 或 fixed 是唯一选择。但必须注意定位基准和渲染陷阱。

• 父容器需显式设 position: relative（局部定位）或 position: fixed; inset: 0（全屏遮罩）
• 子元素写：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
• iOS Safari 中 transform 在 fixed 元素上有抖动风险，加 will-change: transform 或 transform: translateZ(0) 强制硬件加速
• 避免在弹窗内部同时用 margin: auto 或 transform，会与外部居中逻辑冲突

place-items: center 是最简二维居中方案

如果项目已用 Grid 布局，或弹窗结构简单（单个子元素），place-items: center 比 Flex 更省代码、语义更准——它同时控制块轴和内联轴。

• 必须配合明确高度：height: 100dvh; height: 100vh;
• 显式定义 grid-template-rows: 1fr 可确保垂直方向有可分配空间
• IE 完全不支持；Edge 16+、现代 Chrome/Safari/Firefox 均支持
• position: absolute 子元素不受 place-items 影响，这点和 Flex 一致

真正难的不是写出居中代码，而是判断该用哪种居中逻辑——是让整个遮罩层撑满视口再 Flex 居中？还是让弹窗自己脱离流、靠 transform 回拉？不同场景下，z-index 层叠、overflow 裁剪、键盘唤起时的视口变化，都会让“居中”变成一个需要逐层验证的链式问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！