Flexbox垂直居中需父容器有明确高度（如min-height: 100vh），否则align-items: center失效；Grid用place-items: center更稳定，但需显式定义grid-template-rows: 1fr；移动端键盘弹出时vh失真，须JS配合动态调整。
Flexbox垂直居中：最常用但要注意容器高度
Flexbox实现垂直居中依赖父容器的 display: flex 和 align-items: center，但前提是父容器必须有明确高度（比如 height: 100vh 或固定像素值），否则 align-items: center 在无高度约束时可能“失效”——内容会按默认文档流堆叠，看起来没居中。
常见错误现象是：在移动端 Safari 或旧版 Chrome 中，min-height: 100vh 被截断，导致子元素掉出视口底部；或者父容器用 height: 100% 却没给所有祖先设高度，结果计算为 0。
实操建议：
- 优先用
height: 100vh（非嵌套路由页）或min-height: 100vh（带滚动内容） - 子元素无需设
margin或transform，避免叠加干扰 - 若需兼容 IE10+，加
-ms-flex-align: center（但注意 IE 对vh支持不一致）
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
Grid垂直居中：更语义化，但需注意显式轨道定义
CSS Grid 的 place-items: center 是最简写法，但它隐式依赖网格容器至少有一行一列轨道。如果没定义 grid-template-rows 或 grid-template-columns，部分浏览器（如 Firefox 70 之前）会退回到默认的单行单列行为，但某些嵌套场景下仍可能“不触发居中”。
使用场景上，Grid 更适合已知结构层级的布局（比如登录框、弹窗、卡片内图标+文字组合），尤其当你要同时控制水平/垂直/间距/响应式断点时，grid-template 配合 @media 比 Flexbox 的 flex-wrap + 多层 flex-direction 更清晰。
性能影响极小，现代浏览器对 Grid 布局计算已优化到位；但要注意：Grid 不是“万能替代”，若只是单个子元素居中，Flexbox 的渲染路径更短。
实操建议：
- 显式写
grid-template-rows: 1fr可确保垂直方向有可分配空间 - 避免和
float或position: absolute混用，Grid 容器内的绝对定位子元素不受place-items影响 - 移动端 iOS 14.5+ 已完全支持
place-items，无需前缀
.container {
display: grid;
place-items: center;
min-height: 100vh;
grid-template-rows: 1fr;
}
响应式切换时，Flexbox比Grid更容易“意外断裂”
当用媒体查询动态切换布局方向（比如从 column → row），Flexbox 的 flex-direction 改变后，align-items 和 justify-content 的作用轴会互换，容易导致原本垂直居中的内容突然变成水平偏移——尤其在子元素宽高不固定时。
Grid 则稳定得多：place-items: center 始终作用于块轴和内联轴，不管 grid-template-columns 如何变化，只要轨道存在，居中逻辑就不变。
容易踩的坑：
- Flexbox 下用
flex-wrap: wrap后又设align-content: center，但只在多行时生效，单行无效 - Grid 中误用
align-self覆盖了容器级place-items，且未重置 - 在 CSS-in-JS 环境（如 styled-components）里，媒体查询嵌套层级过深，导致
display切换时机错乱，出现闪动
实操建议：
- 响应式居中优先选 Grid，尤其涉及断点较多的项目
- 若必须用 Flexbox，把
flex-direction和justify-content/align-items放在同一媒体查询块里统一控制 - 测试真机 Safari（iOS 15/16）和 Chrome Android，别只信桌面模拟器
移动端键盘弹出时，100vh失效怎么办
这是垂直居中实际落地中最常被忽略的问题：iOS Safari 和部分安卓浏览器在软键盘弹出时会缩小视口高度，导致 100vh 计算值变小，居中元素被顶出屏幕顶部或底部。
Flexbox 和 Grid 都受此影响，因为它们都依赖容器高度参与计算。没有纯 CSS 解决方案，必须配合 JS 检测视口变化。
关键点在于：不能监听 window.resize（触发太频繁且不准），而应监听 visualViewport 的 resize 事件（仅 Chromium 和 Safari 16.4+ 支持），或退而求其次用 focus/blur 捕获输入框状态，动态切换 class 控制容器高度。
实操建议：
- 对输入框加
onFocus={() => document.body.classList.add('keyboard-open')} - CSS 中用
.keyboard-open .container { min-height: auto; height: auto; }并改用position: absolute+top: 50%+transform: translateY(-50%)临时兜底 - 不要依赖
vh做关键布局锚点，尤其在表单页
真正难的不是写哪一行 CSS，而是判断什么时候该放弃“完美居中”，转而接受轻微偏移换取稳定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
