margin: 0 auto 在 iphone 上偏移是因为高 dpr 设备下父容器宽度未取整为整数物理像素，导致渲染栅格化错位；需确保根元素 font-size 取整、容器设明确宽度（如 750px 或 100vw），并避免 transform 微调。
margin: 0 auto 在 iPhone 上偏移，到底为什么？
不是 CSS 写错了，而是 margin: 0 auto 依赖父容器宽度为整数物理像素 —— 高 DPR 设备（如 iPhone 14 Pro 的 3x）下，若你用 rem 计算出的容器宽度是 375.2px（逻辑像素），浏览器会映射成 1125.6 个物理像素，导致栅格化错位、边缘发虚或轻微左偏。
- 确保根元素
font-size取整：用Math.round(document.documentElement.clientWidth / 7.5)替代直接除法 - 居中容器必须设明确宽度：
width: 750px（设计稿基准）或width: 100vw，不能只靠max-width+width: 100% - 避免给该容器加
transform: translateX类微调 —— 它不触发整像素对齐，除非同时加will-change: transform
text-align: center 到底对谁生效？
text-align: center 只作用于行内级元素（span、img、input）和块级元素内的文本内容；它对块级容器本身无效。这是最常被误解的点。
- 错误写法：
<div style="text-align: center"><div>我不会居中</div></div>→ 内层div仍左贴边 - 正确用法：
<p style="text-align: center"><img src=""></p>→img水平居中 - 表单按钮常用此法居中，但更稳妥的是用 Flex：
display: flex; justify-content: center
Flex 居中为什么在某些场景下也不稳？
display: flex; justify-content: center 确实比 margin: 0 auto 更通用，但它稳定性的前提，是父容器有明确且整数物理像素的尺寸约束。
- 如果父容器宽度是浮动的（比如
width: 90%），而视口宽度又非整数逻辑像素，子项的“居中基准”就会漂移 - 移动端 Safari 对
flex的初始渲染有时会延迟触发重排，建议配合min-width: 0或overflow: hidden防止子项撑开父容器 - 老版 Safari（iOS 9–12）需加
-webkit-前缀：display: -webkit-flex和-webkit-justify-content: center
高 DPR 设备上真正的像素对齐控制点在哪？
关键不在单位选 px 还是 rem，而在三个协同条件是否满足：视口缩放比稳定、元素尺寸为整数物理像素、渲染未被亚像素截断。
-
viewport的initial-scale必须与 JS 动态设置的font-size匹配设备逻辑像素，否则rem会失准 - 避免直接给
img或svg写width/height属性 —— 它覆盖viewBox语义，破坏矢量缩放精度 - 慎用
margin-left: 0.5px或top: 2px微调：在 1x 屏准，在 2x 屏就错位 1 物理像素
真正麻烦的不是怎么写居中，而是谁来承载这个居中 —— 容器的宽度来源、单位换算路径、DPR 下的渲染链路，漏掉任一环，都会在 iPhone 上悄悄偏移 0.3px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
