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 为什么有时像没写

它不是魔法，而是一套隐式轨道依赖机制：

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

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

下载

• 没写 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 变更时突然崩掉布局。

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