结论：text-align: center仅对行内内容生效，不能居中块级子元素；正确做法是父容器设text-align: center且子元素为span/img等行内元素，或改用margin: 0 auto（需设宽度）、flexbox等块级布局方案。
直接说结论：对齐不是靠猜，而是看元素类型、布局上下文和浏览器渲染规则；用错方法会导致“写了却没反应”或“在 Chrome 有效、Safari 偏移”。
text-align: center 只对行内内容生效
很多人给 div 自己加 text-align: center，发现子 div 没动——因为 text-align 不控制块级子元素的位置，只影响其内部的文本、span、img（当它是行内元素时）等。
- 正确用法：在父容器上设
text-align: center，子元素是span或img（未改display）才能居中 - 常见错误：给一个
div写text-align: center，又在里面放另一个div（display: block），结果毫无变化 - 若想让子
div居中，得用margin: 0 auto（需有宽度）或display: flex等真正作用于块级布局的方案
margin: 0 auto 失效的三个硬性条件
margin: 0 auto 看似简单，但实际失效频率极高，核心原因就三条：
- 子元素没设
width（或max-width），且不是fit-content行为 —— 浏览器无法计算“剩余空间”，auto就变成0 - 父容器是
display: flex或display: grid—— 这两类布局会接管子元素的外边距行为，margin: auto虽然仍可工作（如用于 flex 项目间的推挤），但不再触发传统居中逻辑 - 子元素是
display: inline（比如span）—— 它不参与块级格式化上下文，margin左右值被忽略（除非显式设display: inline-block）
flexbox 居中为什么常被误用
display: flex + justify-content: center 是最省心的水平居中手段，但副作用明显，容易被忽略：
立即学习“前端免费学习笔记（深入）”；
- 父元素一旦设了
display: flex，所有直系子元素自动成为 flex 项目，float、vertical-align和传统margin对齐全部失效 -
justify-content: center对子元素自身是width: 100%的情况无效——它只分配主轴上的“空闲空间”，如果子元素已经占满，就没空间可分 - 想同时垂直居中？必须加
align-items: center，且父容器高度要有明确值（或由内容撑开），否则可能视觉上没变化
绝对定位居中要防两个坑
用 position: absolute + transform: translate(-50%, -50%) 是脱离文档流后最可靠的居中方式，但有两个关键前提：
- 父容器必须有
position: relative（或absolute/fixed）—— 否则top: 50%会相对于视口定位，页面一滚动就偏移 -
transform: translate(-50%, -50%)依赖的是元素自身的宽高，不是父容器的；如果子元素宽高是auto且内容动态变化，这个居中依然成立，这点比margin方案更鲁棒
最易被忽略的一点：这种居中方式完全绕过文档流，意味着它不会影响其他元素的布局位置，也不受父容器 padding 或 border 影响——这既是优点，也是调试时容易漏查的原因。
