Flex垂直居中更可靠，因margin:auto垂直无效，而flex配合align-items/justify-content可真正撑满容器居中子元素，但需父容器设height且子元素不能脱离文档流。
Flex实现垂直居中为什么比margin:auto更可靠
因为 margin: auto 在块级元素上只对水平方向生效，垂直方向无效；而 display: flex 配合 align-items: center 和 justify-content: center 能真正撑满容器并居中子元素，且不依赖固定高度。
- 必须给父容器设置
height（或min-height），否则 Flex 容器可能塌缩，导致“看起来没居中” - 子元素不能设
float或position: absolute，否则会脱离 Flex 流，align-items失效 - 若子元素是单行文本，用
line-height模拟居中看似简单，但换行后立刻错位，不推荐用于真实响应式场景
Grid布局中place-items:center的兼容性陷阱
place-items: center 是最简写法，等价于 align-items: center; justify-items: center，但它在 IE 和部分旧版 Safari 中完全不支持——不是降级，是直接失效。
- 需要兼容 iOS display: grid; align-content: center; justify-content: center
- 如果父容器有
grid-template-rows或grid-template-columns，place-items可能被覆盖，优先检查是否意外定义了网格轨道 - Grid 居中对子元素数量不敏感，1个或多个子项都能统一居中；Flex 则要求子项是直接子元素，嵌套一层就可能漏掉
响应式下高度不确定时该选Flex还是Grid
当内容高度动态变化（比如文字长度不一、图片尺寸未知），Flex 更稳妥。Grid 的 align-content: center 在单行网格中实际不生效，必须配合 grid-template-rows: 1fr 才能撑高并居中，但这样又容易在小屏上造成内容被压缩。
- 推荐方案：父容器
display: flex; flex-direction: column;，再用justify-content: center;—— 不依赖高度，也不强制子项占满 - 避免用
height: 100vh+ Grid 居中：iOS Safari 中vh会把地址栏高度算进去，滚动时内容突然偏移 - 如果必须用 Grid，改用
min-height: 100vh并搭配grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr)实现“中间内容自适应居中”，但代码变重，调试成本上升
移动端Safari中Flex居中偶尔失效的真实原因
不是 Flex 写错了，大概率是 Safari 对 min-height: 100vh 的解析 bug：当页面有软键盘弹出或地址栏收起时，vh 值突变，Flex 容器未重新计算，导致 align-items 表面生效实则偏移。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：监听
resize事件，手动触发element.style.height = 'auto'; setTimeout(() => { element.style.height = '' }, 10)强制重排 - 根治思路：放弃
100vh，改用min-height: 100dvh（2023 年起 Safari 支持），dvh是设备视口单位，不受地址栏影响 - 注意
100dvh在 Chrome/Edge 106+ 才支持，老版本需回退到 JS 动态计算window.innerHeight
垂直居中的核心从来不是“怎么写”，而是“谁来决定高度”——父容器没撑开，再漂亮的 Flex 或 Grid 都只是悬浮在空中的盒子。
