text-align: center 仅对块级容器内的行内内容生效，对子div等块级元素无效；margin: 0 auto 需同时满足块级、明确宽度、非flex/grid父容器三条件，缺一即失效。
text-align: center 写在 <div> 上却没效果？margin: 0 auto 加了但元素纹丝不动？先别改布局，90% 的“居中失败”根本不是逻辑问题，而是拼写、作用对象或 CSS 层级覆盖导致的假性失效。
为什么 text-align: center 对 <div> 里的文字没反应？
它其实生效了——只是你误判了作用对象。这个属性只影响**块级容器内部的行内内容**（文字、<img>、<span>），对子 <div> 这类块级元素本身完全无效。
- 错误写法：
<div style="text-align: center"><div>我不会被居中</div></div>—— 子<div>是块级，独占一行，text-align管不到它 - 正确写法：
<div style="text-align: center">这段文字会居中</div>或者把子<div>改成display: inline-block - 常见干扰：父容器用了
display: flex，此时justify-content会覆盖text-align，后者直接被忽略
margin: 0 auto 不生效的三个硬性条件漏了哪个？
这个写法不是“加了就居中”，它是一套有严格前提的定位机制：
- 目标元素必须是块级（
display: block或显式设置） - 必须显式声明
width（max-width或fit-content不算，IE 和部分旧浏览器不认） - 不能同时存在
float、position: absolute/fixed，否则 margin 自动失效
典型错误：<div style="margin: 0 auto; max-width: 600px;"> —— 缺了 width，浏览器直接无视 auto 值。
立即学习“前端免费学习笔记（深入）”；
Flex 居中写在 <body> 上为啥页面乱了？
display: flex; justify-content: center; align-items: center 看似万能，但用错位置会破坏整个文档流：
- 如果直接加在
<body>上，所有子元素（包括<header>、<nav>、<main>）都会变成 flex item，失去原本的块级堆叠行为 - 更关键的是：
<body>默认没有高度，align-items: center垂直居中需要父容器有明确高度上下文，否则表现不可控 - 安全做法：只对具体模块容器使用，比如
<div class="modal">，并确保其父容器有min-height: 100vh或固定高
检查拼写与语法错误的实操路径
别靠猜，用开发者工具按顺序验证：
- 右键 → “检查”，选中目标元素，在右侧面板的 “Styles” 标签里确认：
text-align或margin是否真的出现在生效样式列表中（没被划掉） - 点开 “Computed”，搜索
text-align，看最终值是不是center；如果不是，往上翻找被哪个父级的text-align: left继承覆盖了 - 检查元素是否被
position: absolute脱离文档流，且最近非static祖先缺失——这时left: 50%; transform: translateX(-50%)才是真正生效的写法
最常被跳过的一步：确认 HTML 标签闭合正确。比如 <div><p>文字</div></p> 这种嵌套错误会导致浏览器自动修正 DOM 结构，让 CSS 选择器意外失配。
