现代项目优先用place-items: center（Grid），但必须加grid-template-rows: 1fr；若需兼容IE11或单轴居中，选display: flex + align-items: center，前提是父容器有明确高度。
直接给结论：现代项目优先用 place-items: center（Grid），但必须加 grid-template-rows: 1fr；若需兼容 IE11 或简单单轴居中，选 display: flex + align-items: center，前提是父容器有明确高度。
Flex 垂直居中失效的三个硬性条件
不是代码写错了，而是浏览器根本没“参照系”可算：
- 父容器未设
height或min-height（仅height: auto或未设高度时，align-items: center不触发垂直对齐） - 父容器是
inline-flex—— 它会忽略align-items的垂直行为 - 子元素用了
position: absolute—— Flex 只作用于文档流内的 flex item，脱离流后完全失效
常见错误现象：align-items: center 写了但内容贴顶、或整个子元素“消失”在视口外。这时检查 computed height 是否为 0，再逐级往上查祖先元素是否漏设高度。
Grid 的 place-items: center 为什么有时不生效
它不是“自动魔法”，而是一套隐式轨道依赖机制：
立即学习“前端免费学习笔记（深入）”；
- 没定义
grid-template-rows时，部分旧版 Firefox（70 之前）或某些嵌套 Grid 容器里，会退回到单行无高度行为，导致垂直方向无空间可分配 -
place-items只影响直接子元素，如果中间夹了一层 wrapper div，它就对最内层内容“不可见” - 若父容器同时用了
grid-template-areas或显式grid-row/grid-column，且子元素被定位到某固定格子中，place-items仍生效，但可能被子元素自身的justify-self或align-self覆盖
实操建议：哪怕只用一行居中，也显式写上 grid-template-rows: 1fr，避免跨浏览器差异。
移动端 100vh 失真问题怎么破
iOS Safari 和部分安卓 WebView 中，键盘弹出时 vh 会按“视觉视口”缩放，导致容器高度骤减，内容被顶出屏幕。这不是 Flex/Grid 的锅，而是单位本身的缺陷：
- 别用
height: 100vh做居中容器高度，改用min-height: 100vh+ JS 动态 fallback - 监听
resize事件，用window.innerHeight替代vh计算真实可用高度 - 更轻量方案：对登录页/弹窗等关键场景，用
min-height: 100dvh（2023 年起 Chrome/Safari/Firefox 均支持，dvh= dynamic viewport height）
注意：100dvh 在 iOS 16.4+ 才稳定，旧版本仍需降级逻辑。
什么时候该放弃居中，改用语义化结构
强行居中一个段落、按钮或图标，往往暴露的是结构设计问题：
- 如果父容器本该是卡片、模态框、表单区域，却只为“居中”而套一层
flex，说明语义缺失——应直接用section或article+ 合理 padding/margin - 无障碍（a11y）要求内容顺序合理，
transform: translateY(-50%)类绝对定位居中会破坏阅读顺序，Screen Reader 可能跳过或误读 - 动画或过渡中，
place-items居中的元素若宽高动态变化，不会像margin: auto那样重排，但若父容器高度也变，仍可能闪动——这时不如用align-self: center配合固定轨道
真正难的不是写出居中代码，而是判断“这个元素到底该不该被居中”。
