现代项目优先用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，避免跨浏览器差异。

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

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

下载

响应式场景下 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，那再好的居中代码也白搭。

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