现代项目优先用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 为什么经常不生效
不是代码写错了，是浏览器没高度可算——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，避免跨浏览器差异。
响应式切换时 Flexbox 比 Grid 更容易“意外断裂”
用媒体查询动态改布局方向时，Flexbox 更容易出问题。
-
flex-direction: column切到row后，align-items和justify-content的作用轴互换，容易误判对齐效果 - Flexbox 多层嵌套后（比如 flex 容器里再套 flex 容器），
align-content对单行无效，容易踩坑 - Grid 的
place-items不随方向变化而改变语义，始终同时控制水平和垂直
移动端 iOS 14.5+ 已完全支持 place-items，无需前缀；但若项目仍需支持 Android 4.4 WebView 或 IE11，就得退回 Flexbox 方案。
真正难的不是写哪一行 CSS，而是判断「这个居中到底该由谁负责」：整页框架（如登录页）交给 Grid，局部组件（如按钮组、表单项）交给 Flexbox。别让一个 div 同时承担两层布局职责。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
