现代项目优先用place-items: center+grid-template-rows: 1fr+min-height: 100vh；兼容IE11或单轴居中选flex+align-items: center，需父容器有明确高度。
现代项目直接用 place-items: center + grid-template-rows: 1fr，但必须加 min-height: 100vh；若需兼容 IE11 或仅单轴居中，选 display: flex + align-items: center，前提是父容器有明确高度。
Flexbox 垂直居中为什么经常“失效”
不是代码写错了，是浏览器没高度可算——align-items: center 在无高度约束的父容器里根本不触发垂直对齐。
- 父容器
height: auto或完全没设高度 → 计算出的高度为 0，子元素按文档流堆叠 - 父容器是
inline-flex→ 忽略align-items的垂直行为 - 子元素用了
position: absolute→ 脱离文档流，Flex 完全不作用于它 - 移动端 Safari 中
100vh在键盘弹出时被截断，导致内容掉出视口底部
调试时直接看开发者工具的 computed height，从子元素往上查祖先链，只要某一级是 0px，就卡在这儿了。
Grid 的 place-items: center 为什么有时不生效
它依赖隐式轨道分配，不是“写了就一定居中”。关键在垂直方向有没有可分配的空间。
立即学习“前端免费学习笔记（深入）”；
- 没写
grid-template-rows: 1fr→ 部分旧版 Firefox（70 之前）或嵌套 Grid 场景下，会退回到单行无高度行为 - 中间夹了 wrapper div →
place-items只影响直接子元素，对孙级无效 - 子元素设了
align-self: start或被grid-row显式定位 → 会覆盖place-items的默认行为
哪怕只居中一个按钮，也建议显式写上 grid-template-rows: 1fr，避免跨浏览器差异。
响应式场景下 Flex 和 Grid 的切换风险
用媒体查询动态改布局方向时，Flexbox 更容易“断裂”。
-
flex-direction: column切到row后，align-items和justify-content的作用轴互换，容易误判对齐效果 - Grid 的
place-items不随方向变化而改变语义，始终同时控制水平和垂直 - Flexbox 多层嵌套后（比如 flex 容器里再套 flex 容器），
align-content对单行无效，容易踩坑 - Grid 在复杂响应式卡片列表中更稳：用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))配合place-items，一行一居中，换行自动适应
移动端 iOS 14.5+ 已完全支持 place-items，无需前缀；但若项目仍需支持 Android 4.4 WebView 或 IE11，就得退回 Flexbox 方案。
实际项目中怎么选
别纠结“哪个更好”，看具体层级和控制粒度。
- 整个页面框架（如登录页、空状态页）→ 用 Grid：
display: grid; place-items: center; min-height: 100vh; grid-template-rows: 1fr; - 组件内部单轴居中（如按钮图标、表单项标签）→ 用 Flex：
display: flex; align-items: center;，不用管高度是否占满视口 - 要兼容老浏览器或动态内容数量不确定 → Flex 更稳妥，
margin: auto在 Flex 容器内也能居中子元素 - 需要同时控制行列间距、断点重排、跨格合并 → Grid 是唯一选择，Flex 没有二维能力
最常被忽略的一点：两者都要求父容器脱离文档流干扰。如果父容器外层用了 float 或 position: absolute，又没清除或设 top/left，那再好的居中代码也白搭。
