没有“万能居中代码”，不同场景必须用不同方案：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 写在父 <div> 上，子 <code><div> 还是贴左。因为它只控制文字、<code><span></span>、<img alt="HTML元素对齐格式的调整方法" >（当 display 为 inline/inline-block 时）这些行内内容的对齐，不移动块本身。
- 适用场景：段落文字居中、按钮内文字对齐、图片作为行内元素时的水平位置
- 错误写法：
<div style="text-align: center;"><div>我不会动</div></div> - 正确写法（想让子 div 居中）：
<div style="width: 300px; margin: 0 auto;"><div>我会居中</div></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 看似万能，但实际项目里经常失效，问题不在写法，而在布局嵌套太深或默认行为被干扰。
立即学习“前端免费学习笔记（深入）”；
-
align-items: center只作用于**直接子元素**，如果中间多了一层<div> 或换行符生成的文本节点，视觉上就偏了 <li>子元素若设了 <code>width: 100%，它会撑满父容器，justify-content就没效果了 - iOS 9.3 以前的 Safari 对
justify-content: center在单行 Flex 容器中支持不稳，尤其含<img alt="HTML元素对齐格式的调整方法" >或vertical-align时，建议加align-items: flex-start显式重置 - 表单控件（
<input>、<button></button>）混排时，统一设vertical-align: middle或直接用 flex 包裹每组<label>+<input></label> - 必须补一句
transform: translate(-50%, -50%)，把自身宽高的一半“挪回去” - 父容器得有
position: relative（或absolute/fixed），否则top/left会相对于视口计算，滚动就飘走 - 这个方案不依赖元素尺寸是否已知，适合动态内容，但要注意 z-index 和 overflow 隐藏风险
- 在微信内置浏览器等弱实现环境中，
transform兼容性比 flex 更稳，但别和will-change或动画叠加太多，旧安卓 WebView 容易闪退
绝对定位居中必须配 transform，且父容器要有定位上下文
模态框、加载提示这类脱离文档流的元素，position: absolute 是刚需，但只写 top: 50%; left: 50% 会让左上角落在中心，不是真居中。
真正难的不是写出居中代码，而是判断当前元素类型、所处上下文、目标运行环境——比如一个按钮里的图标文字对齐，在 iOS Safari 里用 vertical-align 可能忽高忽低，换成 display: flex 就稳了；而一封发给客户的 HTML 邮件，text-align 和 align 属性反而比 flex 更可靠。
