margin: 0 auto 仅对有明确宽度的块级元素生效；text-align: center 只居中行内内容，不影响块级元素自身位置；flex/grid 居中需父容器显式设 display 并配对应属性。
样式写了 margin: 0 auto 或 text-align: center 却没居中？大概率不是写错了，而是被更高优先级规则压住了，或者根本没作用到目标元素上。
为什么 margin: 0 auto 对 div 没反应
这个写法只对「有明确宽度」的块级元素生效。浏览器算不出左右留多少空白，auto 就直接放弃计算。
- 必须显式设置
width（比如width: 300px或width: 80%） - 确认元素是块级：
display: block（默认div没问题，但若被 JS 或 CSS 改成inline或flex就失效） - 父容器不能是
text-align: left且子元素是inline-block——这会干扰计算；真要这么用，父容器得加text-align: center
text-align: center 为啥没让 div 居中
它只控制「行内内容」在块容器内的水平对齐，对块级子元素本身无效。很多人以为它能“居中盒子”，其实只是让内部文字、img、span 居中了。
- 想靠它居中块级元素，得先把子元素设为
display: inline-block，再配vertical-align: middle - 更稳妥的做法是改用
display: flex或display: grid，语义清晰、行为可预测 - 注意：
text-align: center写在body或html上，不会让所有div居中
Flex 居中突然失效的常见原因
justify-content: center 和 align-items: center 看似简单，但缺一个关键条件就白搭。
- 父容器必须设
display: flex（或inline-flex），只设子项属性如flex-direction是无效的 - 子元素若设置了
width: 100%或max-width: 100%，它仍会撑满容器，看起来像没居中 - 老版本 Safari 需加
-webkit-前缀：display: -webkit-flex、-webkit-justify-content: center - 别在
body直接写display: flex——可能意外影响全局排版，建议包一层<main></main>或<div class="container"> <h3>怎么快速定位是不是被覆盖了</h3> <p>打开开发者工具（F12），选中目标元素，在右侧 <code>Styles面板里看哪些属性被划掉（strikethrough）。点开被划掉的那条，右边会显示来源和 specificity 值（比如0,1,0,1）。- 检查是否被
!important的外部规则覆盖（尤其是框架 CSS 或第三方库） - 确认标签是否真被渲染：用 DevTools 检查该 HTML 是否还在 DOM 中（比如被 JS 删除、条件渲染未触发）
- 留意大小写和拼写：
backgroud-color（少个 r）、dispay这类笔误不会报错，但样式不生效 - 某些属性对特定标签无效：比如
width对默认inline元素不起作用，除非先设display: inline-block或block
真正难调试的，往往不是哪条规则写错了，而是哪条规则「意外赢了」——比如父容器用了
transform或opacity ，悄悄创建了新的层叠上下文，导致你写的居中逻辑被隔离在局部范围内。 - 检查是否被
