text-align: center 仅对块级容器内的行内内容生效，对子div等块级元素无效；margin: 0 auto 需同时满足块级、明确宽度、非flex/grid父容器三条件，缺一即失效。

text-align: center 写在 <div> 上却没效果？<code>margin: 0 auto 加了但元素纹丝不动？先别改布局，90% 的“居中失败”根本不是逻辑问题，而是拼写、作用对象或 CSS 层级覆盖导致的假性失效。

为什么 text-align: center 对 <div> 里的文字没反应？ <p>它其实生效了——只是你误判了作用对象。这个属性只影响**块级容器内部的行内内容**（文字、<code><img>、<span></span>），对子 <div> 这类块级元素本身完全无效。 <ul><li>错误写法：<code><div style="text-align: center"><div>我不会被居中</div></div> —— 子 <div> 是块级，独占一行，<code>text-align 管不到它

正确写法：<div style="text-align: center">这段文字会居中</div> 或者把子 <div> 改成 <code>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;"> —— 缺了 <code>width，浏览器直接无视 auto 值。

Flex 居中写在 上为啥页面乱了？

display: flex; justify-content: center; align-items: center 看似万能，但用错位置会破坏整个文档流：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 如果直接加在 上，所有子元素（包括 <header></header>、<nav></nav>、<main></main>）都会变成 flex item，失去原本的块级堆叠行为
• 更关键的是： 默认没有高度，align-items: center 垂直居中需要父容器有明确高度上下文，否则表现不可控
• 安全做法：只对具体模块容器使用，比如 <div class="modal">，并确保其父容器有 <code>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>文字</p></div>

  这种嵌套错误会导致浏览器自动修正 DOM 结构，让 CSS 选择器意外失配。