最可靠垂直居中方案是 display: flex + align-items: center，但需父容器有明确高度且设为 flex 容器；absolute + transform(-50%,-50%) 要求父容器有 relative 定位；place-items: center 在现代浏览器可用但不兼容 ie11。
现代 H5 页面中，display: flex + align-items: center 是最可靠、最易维护的垂直居中方案，但必须确保父容器有明确高度——否则它根本不会生效。
为什么 flex 垂直居中经常“写了却没效果”
这不是代码写错了，而是两个硬性前提被忽略：
- 父容器没设
display: flex——align-items对非 flex 容器完全无效 - 父容器高度塌陷（比如只写了
width，没设height或min-height，内部又没内容撑开）—— flex 的交叉轴没长度参考，“center”就无从计算 - 子元素是
display: block且宽度为 100% —— 这不影响align-items垂直对齐，但容易让人误判整个逻辑崩了
常见错误现象：.container { display: flex; justify-content: center; align-items: center; } 写完页面毫无反应。先查父容器是否真有可测量的高度（例如 height: 100vh、min-height: 400px，或被子内容自然撑开）。
absolute + transform(-50%, -50%) 的真实适用边界
这个组合在 iOS Safari 和安卓 WebView 中兼容性好（IE9+），但它不是“一贴就灵”，关键依赖定位上下文：
- 父容器必须有
position: relative（或absolute/fixed）——否则top: 50%会相对于 viewport 计算，滚动时位置飘走 -
transform: translate(-50%, -50%)必须写成完整形式，不能拆成translateX(-50%) translateY(-50%)单独调用，否则易漏、易拼错 - 子元素若宽高动态（如图片未加载完、字体未就绪），会出现短暂“闪动”——可提前设
min-height或用aspect-ratio缓解
它不关心子元素尺寸是否固定，这点比 margin 负值方案更灵活，但也意味着你得自己控制定位上下文，不能指望它自动适配任意嵌套结构。
place-items: center 在 H5 中能直接用吗
可以，但要看目标机型：
- Chrome 57+ / Firefox 52+ / Safari 10.1+ 支持
place-items: center，即一行搞定水平+垂直居中 - IE11 不支持，需回退到
justify-items: center; align-items: center; - 若父容器已有复杂
grid-template-areas或轨道定义，加place-items可能覆盖原有对齐逻辑
它不是 flex 的替代品，而是单个子元素居中的极简选择；如果项目最低支持 iOS 10.3+、Android Chrome 57+，它比 flex 更干净，但别在需要兼容低端安卓 WebView 的场景里强行上。
真正容易被忽略的是：几乎所有垂直居中方案都依赖父容器有“可测量的交叉轴长度”。没有高度，align-items、place-items、甚至 line-height 都只是摆设——先确认父容器高在哪，再选方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
