text-align仅对行内内容生效，块级元素水平居中需用margin: 0 auto（需设宽度）、Flex布局或table-cell方案；注意iOS旧版Safari兼容性及邮件客户端对HTML align属性的优先支持。
HTML 中 text-align 只对内联内容生效，块级元素居中得用别的招
很多人试了 text-align: center 发现 div 不居中，是因为它只影响**行内内容的对齐方式**，不是让整个块“挪位置”。真正想让一个 div 水平居中，得靠 margin: 0 auto（前提是它有明确宽度）或 Flex/Grid 布局。
常见错误现象：text-align: center 加在父容器上，子 div 还是贴左；或者给子 div 自己加 text-align，结果只是里面文字居中，盒子本身没动。
-
text-align适用于：文字、span、img（当它们是行内元素时）、按钮文字等 -
margin: 0 auto适用于：有固定宽度（如width: 300px或max-width）的块级元素 - Flex 方案更通用：
display: flex+justify-content: center，但要注意父容器高度是否撑开、是否意外隐藏溢出
移动端和旧版 iOS Safari 对 flex 的 justify-content 兼容性有坑
iOS 9.3 之前的 Safari 对 justify-content: center 在单行 Flex 容器里支持不稳，尤其当子元素是图片或带 vertical-align 的内联元素时，容易偏移。这不是 bug，是早期实现把基线对齐逻辑混进去了。
使用场景：做响应式卡片列表、登录框居中、图标按钮组——这些地方一旦在老 iOS 上错位，用户第一反应就是“页面坏了”。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法：加
align-items: flex-start显式重置交叉轴行为 - 更彻底的兼容方案：用
display: table-cell+vertical-align: middle配合text-align: center，但语义和维护性差 - 检查真机：iOS 10+ 基本没问题，但企业内网或教育设备仍可能跑着 iOS 9
用 margin: auto 居中时，忘了设 width 或用了 width: fit-content
margin: 0 auto 要生效，必须满足两个条件：元素是块级（或设了 display: block），且**水平方向上有可计算的剩余空间**——也就是不能是 width: 100%，也不能是未设宽度的 width: auto（此时宽度由内容撑开，浏览器无法算出左右 margin 应该分多少）。
常见错误现象：Chrome 里看着好好的，发到微信内置浏览器就贴左；或者加了 fit-content 后，在 Firefox 下居中，Safari 下失效。
-
width: fit-content在 Safari 15.4 之前需要-webkit-fit-content前缀 - 更稳写法：
width: max-content+margin: 0 auto，但注意它会按最长子元素宽度扩展，可能破布局 - 替代思路：用
inline-block+ 父级text-align: center，适合按钮、徽章这类小部件
表格单元格（td）里的对齐优先级比外部样式高
如果 HTML 里写了 <td align="right">，哪怕你在 CSS 里写了 <code>td { text-align: left !important }，某些老版本 Android WebView 和 Outlook 邮件客户端仍然会以 HTML 属性为准。这不是规范问题，是渲染引擎对过时属性的“向后妥协”。
使用场景：写邮件模板、嵌入式设备管理界面、遗留系统后台——这些地方你没法控制运行环境，只能自己收住。
- 统一用 CSS 控制：
td, th { text-align: inherit }先清掉默认继承，再单独设 - 避免混合写法：不要一边写
align="center"，一边又写style="text-align: left" - 邮件开发特别注意：Outlook 2007–2019 基本只认
align属性，CSS 几乎被忽略，这时候就得妥协
对齐看着简单，但跨平台差异全藏在渲染引擎的兼容层和默认行为里。最麻烦的不是不会写，是写了之后在某个设备上突然不对劲——往往是因为某条规则被更高优先级的属性/属性值覆盖了，或者宽度计算逻辑在不同引擎里根本不一样。
