移动端垂直居中首选 display: flex + align-items: center，兼容 iOS 9+/Android 5+；若需支持 iOS 8–9 或 Android 4.4，才回退至 absolute + transform(-50%,-50%) 或 margin: auto 方案。
移动端垂直居中，优先用 display: flex，兼容性已无实质障碍；若需支持 iOS 8–9 或 Android 4.4，才需 fallback 到 position: absolute + transform 或 margin: auto 方案。
flex 实现垂直居中（推荐首选）
现代移动端（iOS 9+、Android 5+）对 display: flex 支持完整，align-items: center 能稳定实现子元素垂直居中，无需知道子元素尺寸，也不依赖父容器是否设高度（只要父容器有明确高度或能撑开即可）。
-
align-items: center作用于 flex 容器，对所有直接子项生效；若只希望某一个子元素居中，需确保它是唯一 flex 项目，或用margin: auto单独控制 - 避免在 flex 容器上同时设
text-align: center和justify-content: center—— 后者已覆盖水平居中，前者可能干扰内联文本渲染 - 旧版 Safari（iOS 8–9）对
align-items在某些嵌套场景下有 bug，可加min-height: 1px或用flex-direction: column+justify-content: center替代
absolute + transform(-50%, -50%)（兼容兜底方案）
当必须支持 iOS 8 或 Android 4.4 时，这是最可靠、最可控的方案。它不依赖子元素宽高是否固定，但要求父容器设 position: relative。
-
top: 50%和left: 50%把元素左上角移到父容器中心，transform: translate(-50%, -50%)再反向平移自身宽高的 50%，实现真居中 - 注意：若子元素含
width: 100%或max-width，translateX(-50%)仍按实际渲染宽度计算，不会溢出；但若用vw单位且页面缩放，可能轻微偏移 - 不要混用
margin-top: -XXpx和transform—— 两者叠加会导致定位错乱，浏览器解析顺序不一致
absolute + margin: auto（适合定宽高元素）
这个方案简洁，但限制最多：子元素必须有明确的 width 和 height，且父容器需设 position: relative，同时 top/bottom/left/right 都设为 0。
- 原理是浏览器将
margin: auto解释为“在可用空间内均分”，所以只有四边都为0时才触发垂直+水平居中 - 在 iOS 12 以下 Safari 中，若父容器高度由内容撑开（而非显式设置），
margin: auto可能失效；此时必须给父容器加height或min-height - 不适用于
img等替换元素在未设宽高时的场景 —— 浏览器无法推导“可用空间”，会退化为左上角定位
line-height + text-align（仅限单行文本）
对纯文本内容（如标题、按钮文字），这是最轻量、零 JS、零额外 DOM 的方案，但仅适用于单行、无换行、高度固定的容器。
- 设父容器
height和line-height相等，并配合text-align: center，文字自然垂直+水平居中 - 若文本可能换行，
line-height会拉高行距，导致整体偏下；此时应改用 flex 或 table-cell - 在 iOS 微信 WebView（X5 内核）中，若父容器用了
font-size: 0清除 inline-block 间隙，又忘了重置子元素字体大小，文字会不可见 —— 这个细节容易被忽略
真正麻烦的不是方法多，而是混合使用时的层叠逻辑和浏览器解析差异；比如在 flex 容器里再套 absolute 定位，align-items 就不再影响那个子元素 —— 这类隐性失效，比写错语法更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
