Flex垂直居中失效主因是父容器无高度、为inline-flex或子元素绝对定位；Grid的place-items失效主因是未定义grid-template-rows、存在wrapper嵌套或子元素设置align-self覆盖。
Flex 和 Grid 都能居中，但失效原因完全不同：Flex 失效多半是父容器没高度，Grid 失效多半是没定义轨道。
Flex 垂直居中不生效的三个硬条件
不是代码写错了，而是浏览器压根没空间可算：
- 父容器
height为auto或未声明 ——align-items: center在交叉轴（默认垂直方向）无尺寸时直接“跳过”对齐 - 父容器是
display: inline-flex—— 它会忽略align-items的垂直行为，只响应水平对齐 - 子元素用了
position: absolute—— Flex 只作用于文档流内的子项，脱离流后justify-content和align-items全部失效
常见现象：写了 align-items: center 但内容贴顶、或整个子元素“消失”在视口外。调试时打开开发者工具，检查父容器的 computed height 是否 > 0；再逐级往上查祖先是否漏设 height 或 min-height。
Grid 的 place-items: center 为什么有时像没写
它不是魔法，而是一套隐式轨道依赖机制：
立即学习“前端免费学习笔记（深入）”；
- 没写
grid-template-rows: 1fr—— 某些旧版 Firefox（70 之前）或嵌套 Grid 场景下，会退回到单行无高度行为，导致垂直方向无空间可分配 - 中间夹了 wrapper div ——
place-items只影响直接子元素，对孙级内容完全不可见 - 子元素自身设了
justify-self或align-self—— 这两个属性会覆盖place-items的效果
实操建议：哪怕只用一行居中，也显式加上 grid-template-rows: 1fr，避免跨浏览器差异；若容器已定义 grid-template-areas，加 place-items 前先确认是否真需要覆盖原有对齐意图。
移动端 100vh 失真问题怎么兜底
iOS Safari 在键盘弹出或地址栏收起时会动态缩放 100vh，导致内容被截断或错位：
- 用
min-height: 100vh替代height: 100vh，允许内容撑高容器 - 加
min-height: -webkit-fill-available作为 Safari 专属 fallback - 极端场景（如登录页需始终满屏）可配合 JS 动态监听
resize或focusin，重设容器高度
注意：-webkit-fill-available 不是标准属性，仅 Safari 支持，不要指望它在 Chrome 或 Firefox 生效。
真正容易被忽略的点是：Flex 和 Grid 的居中逻辑根本不在一个抽象层上——Flex 是靠“主轴+交叉轴”的流式对齐，Grid 是靠“单元格内 item”的坐标对齐。选错方案不会报错，但会在嵌套、响应式或 DOM 变更时突然崩掉布局。
