text-align: center只对父容器内的行内内容（如文本、、）水平居中，不控制块级元素自身位置；需作用于块级父元素，且子元素不能脱离文档流（如float/absolute），否则失效。
text-align: center 只对行内内容起作用
它不居中块级元素本身，只控制父容器内部的行内级内容（<span></span>、<img>、文本）对齐方式。常见错误是给一个 <div> 加 <code>text-align: center 却没反应——因为 div 默认是块级，它自己不受这个影响。
适用场景：<p></p> 文字居中、一组 <button></button> 或图标水平排列居中。
- 父容器必须是块级上下文（如
div），且未设display: flex或display: grid，否则该声明被忽略 - 子元素若用了
float或position: absolute，text-align失效 -
<img>默认是行内元素，所以直接生效；但若加了display: block，就得换别的方法
margin: 0 auto 要求块级 + 定宽 + 在普通流中
这是真正“居中元素自身”的传统方案，但三个条件缺一不可：元素是 display: block（或 table 等可设宽的格式上下文）、有明确 width（不能是 100% 或 auto）、未脱离文档流（即不能有 float、position: absolute）。
常见踩坑：<img> 直接写 margin: 0 auto 无效——得先加 display: block；父容器是 flex 或 grid 时，该声明完全被忽略。
- 兼容性极好，从 IE6 开始就支持
- 响应式下如果用
max-width替代width，margin: 0 auto依然有效 - 垂直方向不起作用，想垂直居中得配合其他手段（比如
line-height或flex）
flex 布局的 justify-content: center 最省心但改变父容器行为
只要父容器设 display: flex 和 justify-content: center，子元素立刻水平居中，无论它是 <div>、<code><img> 还是 <button></button>。想同时垂直居中，补上 align-items: center 即可。
副作用明显：父容器变成 Flex 容器后，所有直系子元素自动成为 Flex 项目，float、vertical-align、甚至部分 margin 行为都会失效。
- IE10–11 对
justify-content支持有 bug，老项目慎用；IE9 及以下完全不支持 - 如果父容器高度未定义，又想垂直居中，必须显式设置高度（如
min-height: 100vh） - 子元素若本身是
display: flex，不影响居中逻辑，但嵌套层级多了容易混淆主轴方向
position: absolute + transform: translateX(-50%) 专治脱离文档流
当元素已经用了 position: absolute 或 fixed，又必须精确居中时，这是目前最可靠的方式。关键在 transform: translateX(-50%)——它把元素向左平移自身宽度一半，不依赖具体像素值，比 margin-left: -100px 安全得多。
必须配套：父容器设 position: relative（或其他非 static 定位），否则 left: 50% 会相对于视口计算。
- 常见错误：只写
left: 50%，结果元素左边缘在中心，右半边跑出屏幕 - 忘了给父容器加
position: relative，导致定位基准错乱 - IE9+ 支持，但旧版 Safari 需要
-webkit-transform前缀
真正难的不是写出几种方法，而是看到一个居中需求时，第一反应是判断：它是不是行内？有没有固定宽高？是否已脱离文档流？父容器是什么布局模式？选错方案比没写样式还危险——比如在 flex 容器里硬套 margin: 0 auto，或者给绝对定位元素漏掉 position: relative 到父级。
