移动端h5元素居中不能照搬pc端写法，因viewport缩放、软键盘弹出及ios safari滚动异常会导致失效；text-align: center仅对行内内容有效，margin: 0 auto需配合max-width/width防溢出，flex居中须用min-height: 100dvh防ios地址栏跳变，absolute+transform需配合focus事件动态切换fixed以应对软键盘偏移。
移动端 H5 页面里元素居中，不能照搬 PC 端写法——viewport 缩放、软键盘弹出、iOS Safari 的怪异滚动行为，会让很多“看起来没问题”的居中方案当场失效。
text-align: center 只对行内内容有效
给父容器加 text-align: center 是最常用也最容易误用的写法。它只影响子元素中的文本、img、span 这类默认 display: inline 或 inline-block 的内容。
- 如果子元素是
div且没设display: inline-block，它会无视text-align，继续左对齐 - 在 iOS Safari 中，
text-align: center对input内部文字生效，但不会让input本身居中——得单独处理它的父容器 - Android Chrome 某些版本下，
text-align: center遇到white-space: nowrap会失效，需配合overflow: hidden或重置white-space
margin: 0 auto 在移动端必须设 width 且防缩放干扰
这是定宽块级元素水平居中最稳的方案，但在移动端要多防两步。
-
width不能只写300px——建议用max-width: 80%+width: 100%组合，避免横屏时溢出 - 用户双指缩放后，
margin: 0 auto仍生效，但视觉上可能偏移；可加user-scalable=no（不推荐）或监听resize事件重算（开销大），更实际的是用vw单位替代固定像素 - 如果父容器用了
display: flex或display: grid，margin: 0 auto直接被忽略——Flex/Grid 子项的 margin auto 行为完全不同
Flex 居中必须保证父容器有明确高度
display: flex + justify-content: center + align-items: center 是移动端首选，但垂直居中常失败，原因几乎全是父容器高度没撑开。
- 仅设
height: 100%不够——它依赖父级高度，而html和body默认没高度；应写min-height: 100vh或height: 100vh - iOS Safari 中，
vh在地址栏显示/隐藏时会跳变（比如从 667px → 690px），导致元素上下抖动；稳妥做法是用min-height: 100dvh（2024 年起支持，iOS 16.4+） - 若父容器是滚动区域（如
overflow-y: auto），align-items: center会让子元素始终贴在可视区顶部，而非内容区中心——此时该用place-content: center或 JS 计算
绝对定位 + transform 在软键盘弹出时会偏移
模态框、提示层这类脱离文档流的元素，常用 position: absolute + transform: translate(-50%, -50%) 居中。但在移动端，软键盘弹出会触发 viewport 高度重算，导致定位错乱。
- Android 大部分浏览器和 iOS Safari 在软键盘弹出时，
vh值变小，top: 50%计算基准偏移，元素被顶到屏幕外 - 解决方案不是禁用软键盘，而是监听
focus事件，在input获焦时临时切换为position: fixed+top: 50%+transform，失焦再切回 - 别在
body上直接设position: relative——它会被微信内置浏览器等 UA 强制重置；包一层div#app并设position: relative更可靠
真正麻烦的不是哪一种方法写不对，而是同一套 CSS 在 iOS 和 Android 上表现不一致，甚至同一系统不同版本也有差异。动手前先确认目标机型和 WebView 内核版本，比盲目堆属性更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
