text-align: center 失效主因是作用对象错误：它仅对块级容器内的行内内容生效，对块级子元素（如div、button）无效；移动端需检查父容器display类型、子元素display属性及flex布局中justify-content与align-items的协同设置。
移动端 text-align: center 失效？检查父容器 display 类型
很多开发者发现给父元素加了 text-align: center，但按钮或图片在手机上还是左对齐——根本原因是子元素是块级（比如 div、button），而 text-align 只影响行内内容（文本、img 默认行内、span 等）。
解决办法不是硬改子元素 display，而是确认：如果子元素本身是块级且需居中，text-align 就不该是首选方案。
常见误用场景：
• 用 <div style="text-align: center;"><button>提交</button></div> —— 按钮是块级，默认独占一行，text-align 对它无效
• 移动端导航栏里给 .nav 加 text-align: center，但里面是 ul + li（块级结构），照样不居中
Flexbox 在移动端必须显式设 flex-direction: column 才能堆叠居中
桌面端用 display: flex; justify-content: center; align-items: center; 居中一个登录框很稳，但切到移动端后，如果只加 @media 改 flex-direction 却忘了重置对齐方式，就会出问题。
典型错误：
• 桌面端：.container { display: flex; justify-content: center; align-items: center; }
• 移动端媒体查询里只写了：.container { flex-direction: column; } —— 此时 justify-content: center 仍控制主轴（现在是垂直方向），但 align-items: center 控制交叉轴（水平方向），所以文字确实水平居中了，但整个容器可能被挤到顶部，视觉上“没居中”
正确做法：
• 移动端要确保高度撑开（比如 min-height: 100vh）
• 显式保留或重设 justify-content: center 和 align-items: center，二者缺一不可
• 若子项是垂直堆叠的列表，align-items: center 能让每项水平居中，justify-content: center 让整体在视口垂直居中
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
用 margin: 0 auto 居中块级元素？移动端必须保证宽度可控
margin: 0 auto 在移动端失效，90% 是因为宽度没约束好。
常见陷阱：
• 写了 <div style="width: 80%; margin: 0 auto;">内容</div>，看起来没问题，但父容器（比如 body）没设 max-width 或 padding，导致 80% 宽度在小屏下依然超宽、触发横向滚动，居中效果被掩盖
• 使用 width: fit-content 或 width: max-content，这些值在部分 Android 浏览器（尤其旧版 WebView）中兼容性差，直接退化为 width: auto，margin: 0 auto 失效
稳妥做法：
• 固定宽度慎用（如 width: 320px），优先用相对单位：width: 90% + max-width: 480px
• 配合 box-sizing: border-box，避免 padding/border 撑破宽度
• 测试真机，别只信 Chrome DevTools 的模拟尺寸
绝对定位 + transform: translate(-50%, -50%) 在 iOS Safari 中要注意 viewport 缩放
这个组合在 iOS 上偶尔“偏一点”，不是代码写错了，而是页面被用户双指缩放过，或者 viewport meta 标签漏了 user-scalable=no（不推荐禁用缩放，但得知道影响）。
更隐蔽的问题：
• position: absolute 的父容器没设 position: relative，导致定位基准变成视口，而 iOS Safari 在地址栏收起/展开时会动态调整视口高度，造成“跳动居中”
• transform 在老版本 iOS（inline 元素支持不稳定，如果居中的是 span，先加 display: inline-block
建议：
• 优先用 Flexbox/Grid，绝对定位仅用于特殊场景（如气泡提示、遮罩层）
• 必须用时，父容器加 position: relative; height: 100vh;，子元素用 top: 50%; left: 50%; transform: translate(-50%, -50%);
• 避免在 body 直接定位，改用包裹一层 div 并设 position: relative
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
