用 margin: 0 auto 让块级元素自身居中，需设宽度且不能浮动或定位；text-align: center 让父元素内行内内容居中，不作用于块级子元素本身。
直接说结论：用 margin: 0 auto 是让「元素自己」在父容器里居中；用 text-align: center 是让「元素内部的文本或行内内容」居中。两者作用对象完全不同，混用或互换会失效。
什么时候该用 margin: 0 auto
它只对块级元素（比如 div、p、section）起作用，且必须满足两个硬性条件：
- 元素必须有明确的
width（不能是auto或未设置） - 元素不能是浮动（
float）、绝对定位（position: absolute）或固定定位（position: fixed），否则margin: auto会被忽略
常见错误现象：div 写了 margin: 0 auto 却不居中——大概率是没设 width，或者父容器是 display: flex / display: grid，此时 margin: auto 行为会变化（比如在 Flex 容器中，margin: auto 可以居中，但原理已不同）。
示例（有效）：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 300px;
margin: 0 auto;
}
什么时候该用 text-align: center
它是作用在父元素上的，影响的是父元素内部的「行内内容」：文本、span、img（默认行内）、button（默认行内块）等。它对块级子元素本身无效。
关键点：
- 不需要子元素设宽度，也不要求子元素是块级
- 会继承——如果父元素设了
text-align: center，所有后代行内内容都会受影响，除非被显式覆盖 - 对
div子元素不起作用，但你可以把div改成display: inline-block，再配合text-align: center实现“伪居中”
常见错误现象：给一个 div 自己加 text-align: center，指望它自己居中——这是误解，它只是告诉“我里面的东西请居中”，不是“我自己请居中”。
示例（有效）：
立即学习“前端免费学习笔记（深入）”；
.container {
text-align: center;
}
.container img {
/* img 默认行内，会被居中 */
}
.container span {
/* 同样被居中 */
}
img 居中为什么有两种写法
因为 img 天生是行内元素，所以它既可以用 text-align: center（靠父容器控制），也可以转成块级后用 margin: 0 auto（靠自己控制）。
两种路径的区别：
-
img { display: block; margin: 0 auto; }：img成为独立块，脱离文本流，上下不会和文字混排；居中逻辑清晰、可控 -
.parent { text-align: center; }：img保持行内特性，仍受父容器行高、字体大小等影响；适合图文混排场景
性能与兼容性影响很小，但要注意：如果父容器有多个行内元素（如多张图+文字），text-align: center 会让它们全部居中排列；而 display: block + margin 是单个控制，更精准。
容易踩的坑：float / position / display 的干扰
这三个属性会直接让 margin: 0 auto 失效：
-
float: left或float: right：一旦浮动，元素脱离文档流，margin: auto不再计算居中 -
position: absolute或position: fixed：此时margin: auto在大多数浏览器中被忽略（除极少数旧版 IE 的怪异行为） -
display: inline或display: inline-block：这些不是块级，margin: 0 auto对左右外边距的自动计算无效（但inline-block可配合text-align: center）
最常被忽略的一点：当父容器用了 display: flex，你其实根本不需要 margin: 0 auto 或 text-align: center ——直接用 justify-content: center 更干净。但如果你还在老项目里维护 CSS，得确认清楚布局上下文，别把现代方案套进传统盒模型里。
