移动端垂直居中首选flex+align-items: center，因vertical-align仅对inline/table-cell生效且依赖行高或表格布局，在流式布局中无效；必须设父容器明确高度、align-items: center及justify-content: center。
移动端 CSS 垂直居中没有“万能解”，但用 flex + align-items 是最可靠、兼容性足够（iOS 9+/Android 4.4+）的方案。
为什么不用 vertical-align？
vertical-align 只对 inline 或 table-cell 元素生效，且依赖行高或父容器为表格布局——在移动端常见流式布局里基本无效。常见错误是给一个 div 直接设 vertical-align: middle，结果毫无反应。
- 它不是用来居中块级子元素的，别被名字误导
- 配合
display: inline-block能用，但需额外处理空白符和基线对齐，容易偏移 - 在 flex 或 grid 成为主流后，
vertical-align已退居次要场景（如图标对齐文本）
flex 居中时必须设置的三个关键点
只写 display: flex 不够，缺一不可：
- 父容器必须有明确高度（比如
height: 100vh或min-height: 100vh），否则align-items: center没参考系 - 必须声明
align-items: center（垂直），justify-content: center（水平）可选，但常一起用 - 避免子元素自身
margin或padding干扰，尤其注意 iOS Safari 对box-sizing的默认行为差异
示例：
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh; /* 关键：不能只靠 content 高度 */
}
<p>.content {
/<em> 不需要 transform、line-height 等 hack </em>/
}</p>
遇到 position: absolute 怎么安全居中？
当必须用绝对定位（例如弹窗、loading 层），别只靠 top: 50% + margin-top: -half-height——内容高度未知时会失效。
- 推荐用
transform: translate(-50%, -50%)，不依赖具体像素值 - 必须同时设
left: 50%和top: 50%，否则translate无锚点 - 注意某些 Android WebView（如 UC 内核）对
transform的渲染延迟，可加will-change: transform微优化
简写写法：
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
真正麻烦的是嵌套滚动区域里的垂直居中——比如 modal 内部有个可滚动列表，此时 flex 的 align-items 会以滚动容器高度为基准，而不是视口。这种场景得结合 JS 判断可视区域，纯 CSS 无解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
