HTML元素移动端居中失效主因是viewport配置不全（缺initial-scale=1.0）和布局误用；text-align仅对行内内容有效；推荐flex/grid布局，慎用line-height和transform居中；须设max-width:100%、box-sizing:border-box防溢出。
HTML元素居中样式在部分手机上失效，90%以上是 viewport 配置不全 + 布局机制误用导致的，不是 CSS 写错了，而是浏览器根本没按你预期的方式渲染。
viewport 标签缺失或参数不完整
没有 <meta name="viewport">，或只写了 width=device-width 却漏掉 initial-scale=1.0，iOS Safari 和多数安卓 WebView 会强制缩放页面，让所有 CSS 像素单位（包括 margin、line-height、transform）全部失准。
- 必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 不要加
user-scalable=no或maximum-scale=1.0，除非有强交互约束（如游戏画布），否则会破坏可访问性且加剧居中偏差 - 确保
<head>中只存在一个viewport标签；重复声明时，后写的会覆盖前写的 - 真机测试时，Chrome DevTools 模拟器无法复现 Safari 的缩放策略和部分安卓厂商浏览器的私有渲染行为
text-align: center 对块级元素无效
text-align: center 只控制**行内内容**（文字、<img>、<span>）在父容器内的水平对齐，对 <div>、<section> 这类块级子元素本身毫无作用——很多人以为它“居中了盒子”，其实只是把盒子里的文字居中了。
- 若想靠
text-align辅助居中块级元素，子元素需设为display: inline-block，并配合vertical-align: middle - 更稳妥的做法是改用
display: flex或display: grid：语义清晰、行为可预测、无兼容性盲区 - 特别注意：
place-items: center在 Grid 中失效，往往是因为父元素没设display: grid，或子元素被place-self覆盖，或设置了width: 100%导致撑满容器、视觉上“没动”
line-height 垂直居中在安卓机上偏上
给按钮或单行文本设 height 和相等的 line-height，在 PC 和 iPhone 上看起来正常，但在部分安卓机型（尤其旧版 UC、QQ 浏览器、华为自带浏览器）上文字明显偏上。这不是 bug，而是不同渲染引擎对基线（baseline）和字体度量（font metrics）的解析差异，叠加 DPR 换算误差所致。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 最可靠解法：放弃
line-height，改用padding控制垂直空间，例如padding: 0.5rem 1rem，上下值相等即可 - 避免
transform: translateY(-50%)配合top: 50%，容易触发独立图层、影响 z-index 或造成模糊 - 如果必须用 transform，优先选
transform: translate(-50%, -50%)+position: absolute+ 明确宽高，但要额外处理父容器position: relative和 overflow 问题 - 慎用
scale()放大再缩小的 trick，虽能缓解偏差，但会改变实际尺寸、影响点击热区、干扰无障碍读取
flex/grid 容器未约束宽度导致整体右偏
即使 display: flex 和 justify-content: center 写对了，移动端图文仍向右偏移甚至出现横向滚动条，大概率是容器自身溢出了视口——比如父级 <div> 用了 width: 1200px，或子元素带 margin/padding 但没设 box-sizing: border-box，或未加 max-width: 100%。
- 所有直接参与布局的容器，建议统一加：
max-width: 100%; box-sizing: border-box; - 图片务必加
max-width: 100%; height: auto;，否则原始尺寸大于屏幕时必然溢出 - 避免在 flex 容器里混用
float或position: absolute，它们会脱离文档流，破坏justify-content的计算基准 - 检查是否意外继承了第三方库或重置 CSS 的
margin（如body { margin: 8px }），在小屏下累积成明显偏移
真正难的不是写出居中代码，而是意识到：移动端没有“默认正确”的渲染逻辑，每个居中行为都依赖 viewport 的初始设定、布局模型的选择、以及对设备像素比（DPR）和字体度量差异的容忍设计。别迷信模拟器，真机连 Chrome chrome://inspect 或 Safari 开发菜单才是最终裁判。
