居中关键在于匹配元素类型与约束条件：text-align:center仅作用于行内内容；margin:0 auto要求块级、定宽、在普通流中；flex需父设display:flex+justify-content:center；absolute居中须配合position:relative父容器和transform:translatex(-50%)。
没有“几种方式”这种固定答案——居中不是数方法，而是判断元素类型、定位状态和父容器约束后选最不破坏布局的那一个。
text-align: center 只对行内内容生效
它不移动块级元素自身，只控制父容器里文本、<img>、<span></span> 这类行内级内容的对齐。
- 常见错误：给
<div> 父元素加 <code>text-align: center，但子<div> 仍是块级，完全不动 <li>适用场景：段落文字居中、一排图标或链接水平居中</li> <li>失效条件：父容器是 <code>display: flex或display: grid；子元素用了float或position: absolute - 必须设
width（不能是100%或auto） - 子元素不能是
display: inline，得先加display: block（比如<img>） - 不能有
float、position: absolute，否则脱离文档流，margin: auto失效 - 父容器若是
flex或grid，该声明直接被忽略 - 垂直居中只需再加
align-items: center，但父容器必须有明确高度（如height: 100vh），否则交叉轴无参考长度 - 副作用：所有直系子元素变成 Flex 项目，
float、vertical-align、部分margin行为会失效 - IE10–11 对
justify-content支持有 bug，老项目慎用；IE9 及以下完全不支持 - 必须配套：父容器设
position: relative（否则left: 50%相对于视口计算） -
transform: translateX(-50%)把元素向左平移自身宽度一半，不依赖像素值，比margin-left: -100px安全 - 常见错误：只写
left: 50%，结果左边缘在中心，右半边跑出屏幕；或忘了给父容器加position: relative - IE9+ 支持，但旧版 Safari 需要
-webkit-transform前缀
margin: 0 auto 要求块级 + 定宽 + 在普通流中
这是唯一真正“居中元素盒子本身”的传统方案，但三个条件缺一不可。
flex 布局的 justify-content: center 最省心但改父容器行为
只要父容器设 display: flex 和 justify-content: center，子元素立刻水平居中，不管它是 <div>、<code><button></button> 还是 <img>。
absolute + transform: translateX(-50%) 专治脱离文档流
当元素已用 position: absolute 或 fixed，又必须居中时，这是目前最可靠写法。
真正难的不是记住几种写法，而是看到一个居中需求时，第一反应是问：它是不是行内？有没有固定宽高？是否已经 position: absolute？父容器是不是 flex？漏掉任一判断，写出来的样式大概率无效或引发意外布局偏移。
