移动端 text-align: center 失效主因是父容器宽度未明确或 display 类型不兼容；margin: 0 auto 在 flex/grid 布局中无效，需改用 justify-content: center；flex 居中需加 -webkit- 前缀并设明确高度；绝对定位居中须确保父容器为 position: relative。
移动端 text-align: center 失效？检查父容器宽度和 display 类型
很多开发者发现 text-align: center 在手机上文字不居中，其实不是 CSS 失效，而是父容器被意外撑满或设了 display: flex。这个属性只对内联内容起作用，且依赖父容器有明确的“可对齐空间”。
- 常见错误：给
<div> 加了 <code>text-align: center，但里面嵌套的是未设宽的<div> 或用了 <code>float—— 它们不受影响 - 移动端尤其容易踩坑：某些 UI 框架（如 Ionic、Vant）默认把按钮/卡片设为
display: inline-block，而父容器若没清除白空格或设font-size: 0，会导致视觉偏移 - 真要居中文本/图标/
<img>，确保父容器是块级、有宽度（哪怕width: 100%），且子元素没被position: absolute或flex覆盖 -
width必须是具体值（320px）或相对值（80%），不能是max-width: 100%单独存在；width: 100%也不行，没剩余空间可分 - 父容器若用了
display: flex或display: grid，margin: 0 auto完全失效，此时得改用justify-content: center - iOS Safari 15.4+ 对
max-width+margin: 0 auto支持稳定，但老版本（如 iOS 12）建议统一用width: 90%配合margin: 0 auto - 必须给父容器设明确高度（
height: 100vh或min-height: 400px），否则align-items: center没参考基准 - 加兼容写法：
display: -webkit-flex、-webkit-justify-content: center、-webkit-align-items: center - 别让子元素设
margin-top或padding-top，它会干扰 Flex 的垂直计算；若需留空，改用父容器的padding - 父容器必须显式设
position: relative（不能靠默认 static），否则top: 50%会相对于视口定位，滚动后失准 - 避免在
直接设position: relative，可能影响全局；包一层<div class="viewport"> 更安全<li>如果父容器本身是 <code>position: fixed（比如底部导航栏上的浮层），子元素用top: 50%+transform依然有效，无需额外 relative
margin: 0 auto 在 iOS Safari 不生效？确认 width 和父容器布局模式
写死 margin: 0 auto 却在 iPhone 上靠左，八成是宽度没生效或父容器用了 Flex/Grid —— 这俩会直接忽略 auto margin。
Flex 居中在微信内置浏览器错位？加 -webkit- 前缀和 height 控制
微信 Android 端用 X5 内核，iOS 端用 WKWebView，但部分旧版仍对 Flex 的 align-items 解析不准，尤其垂直居中时。
绝对定位居中在滚动页面里跑偏？确保父容器有 position: relative
弹窗、提示条这类脱离文档流的元素，用 position: absolute + transform: translate(-50%, -50%) 是最稳的，但一滚动就偏移，基本是定位上下文丢了。
真正难的不是选哪个方法，而是打开 DevTools 看一眼 computed styles：目标元素的 display 是什么？父容器的 display 是什么？width 计算值是多少？这些比抄代码更能快速定位问题。
