没有“万能居中代码”，不同场景必须用不同方案：text-align: center仅对行内内容有效；margin: 0 auto需块级+显式width；Flex需display: flex+justify-content+align-items+高度；绝对定位需position: relative+transform。

HTML元素对齐不是靠一个属性通吃，得看它是行内还是块级、要水平还是垂直、是否在老 iOS 或邮件客户端里跑——选错方案，text-align: center 加了也白加。

text-align 只影响行内内容，别指望它让 div 居中

这是最常踩的坑：text-align: center 写在父

上，子

还是贴左。因为它只控制文字、、（当 display 为 inline/inline-block 时）这些行内内容的对齐，不移动块本身。

• 适用场景：段落文字居中、按钮内文字对齐、图片作为行内元素时的水平位置
• 错误写法：
  我不会动
• 正确写法（想让子 div 居中）：
  我会居中
  ，或用 display: flex
• 注意：在 Outlook 等邮件客户端中，align="center" 属性仍比 text-align 优先级高，但语义已废弃，仅作兼容兜底

margin: 0 auto 要生效，必须满足两个硬条件

margin: 0 auto 是块级元素水平居中最稳的老办法，但它不是“写了就灵”，浏览器得能算出左右空多少。

• 必须设明确宽度：width（如 300px）、max-width，或 width: fit-content（Safari 15.4 前需 -webkit-fit-content）
• 不能是 width: 100% 或未设宽的 width: auto（此时宽度由内容撑开，无剩余空间可分）
• 父容器不能是 display: flex 或 display: grid —— 它们会覆盖 auto 的计算逻辑
• 元素自身得是块级：display: block（默认满足），不能是 inline 或被 float 拉出文档流

Flex 布局居中要防“对齐上下文丢失”

display: flex + justify-content: center 看似万能，但实际项目里经常失效，问题不在写法，而在布局嵌套太深或默认行为被干扰。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• align-items: center 只作用于**直接子元素**，如果中间多了一层
  或换行符生成的文本节点，视觉上就偏了
• 子元素若设了 width: 100%，它会撑满父容器，justify-content 就没效果了
• iOS 9.3 以前的 Safari 对 justify-content: center 在单行 Flex 容器中支持不稳，尤其含 或 vertical-align 时，建议加 align-items: flex-start 显式重置
• 表单控件（、）混排时，统一设 vertical-align: middle 或直接用 flex 包裹每组 +

绝对定位居中必须配 transform，且父容器要有定位上下文

模态框、加载提示这类脱离文档流的元素，position: absolute 是刚需，但只写 top: 50%; left: 50% 会让左上角落在中心，不是真居中。

• 必须补一句 transform: translate(-50%, -50%)，把自身宽高的一半“挪回去”
• 父容器得有 position: relative（或 absolute/fixed），否则 top/left 会相对于视口计算，滚动就飘走
• 这个方案不依赖元素尺寸是否已知，适合动态内容，但要注意 z-index 和 overflow 隐藏风险
• 在微信内置浏览器等弱实现环境中，transform 兼容性比 flex 更稳，但别和 will-change 或动画叠加太多，旧安卓 WebView 容易闪退

真正难的不是写出居中代码，而是判断当前元素类型、所处上下文、目标运行环境——比如一个按钮里的图标文字对齐，在 iOS Safari 里用 vertical-align 可能忽高忽低，换成 display: flex 就稳了；而一封发给客户的 HTML 邮件，text-align 和 align 属性反而比 flex 更可靠。