text-align: center作用于父块级元素，仅居中其内部行内内容；margin: 0 auto要求子元素块级、定宽、不脱离文档流才能居中自身；flex需父容器设justify-content和align-items并有高度参照。
直接说结论：没有“通用居中”这回事，text-align: center、margin: 0 auto、display: flex 各管各的场景，用错一个就白调。
text-align: center 只对父容器生效，且只影响行内内容
它不是给要居中的元素自己加的，而是加在它的直接父元素上。比如想让 <img alt="HTML页面元素居中对齐怎么调？快速解决指南" > 或 <label></label> 水平居中，就得在包裹它的 <div> 或 <code><p></p> 上写 text-align: center。
- 如果给
<img alt="HTML页面元素居中对齐怎么调？快速解决指南" >自己加text-align: center，完全无效——text-align不作用于替换元素自身 <div> 这类块级子元素不会响应 <code>text-align，依然靠左；只有文本、<span></span>、默认display: inline的<img alt="HTML页面元素居中对齐怎么调？快速解决指南" >才会动- 父容器若被设成
float或display: inline-block，宽度可能塌陷，导致居中“看起来没效果” - 兼容性极好，IE6+ 都支持，但只管水平，不管垂直
- 元素必须是块级（或显式设
display: block），<img alt="HTML页面元素居中对齐怎么调？快速解决指南" >要居中就得先加display: block - 必须有明确宽度：
width: 300px或max-width: 80%，否则浏览器认为“已占满”，无空间可分 - 不能和
float、position: absolute共存；父容器也不能是display: flex或display: grid，否则margin: auto会被布局引擎忽略 - 常见报错现象：写了
margin: 0 auto却不动 → 先查display和width，再看父容器是不是 Flex/Grid - 父容器必须同时设
justify-content: center（水平）和align-items: center（垂直） - 父容器必须有明确高度参照，比如
min-height: 100vh或height: 400px；否则align-items: center没空间可居中，子元素只会贴顶 - 别直接在
上加display: flex—— 它会让所有直系子元素变成 flex item，破坏原有结构 - 子元素不需要设
margin: auto，也不需要定宽；但若父容器高度由内容撑开（height: auto），垂直居中就失效 - 子元素设
position: absolute; top: 50%; left: 50%，再紧跟transform: translate(-50%, -50%) - 它的最近非
static祖先（通常是父<div>）必须设 <code>position: relative，否则参考的是视口，滚动时位置会漂移 - 不依赖子元素宽高，响应式友好；但低版本 Android WebView 需加
-webkit-transform - 千万别用
margin-top: -100px这类固定像素值回拉——输入框高度一变，整个就偏了
margin: 0 auto 要求块级 + 定宽 + 不脱离文档流
这是让一个 <div>、<code><section></section> 水平居中的经典写法，但它有三个硬性条件，缺一不可。
display: flex 实现双向居中，但父容器高度不能塌
现代项目首选，但最容易只写一半就以为搞定了。真正起效需要两组配合：
立即学习“前端免费学习笔记（深入）”；
绝对定位 + transform 居中适合弹窗，但依赖定位上下文
当元素必须脱离文档流（如模态框、提示气泡），又得精准居中时，这个组合最可控。
真正容易被忽略的点是：居中从来不是单个 CSS 属性的事，而是“元素类型 + 父容器状态 + 文档流位置”三者共同决定的。调不通时，先确认这三项，比反复试 CSS 更快。
