text-align: center 无效的主因是父容器使用了 flex 或 grid 布局，此时应改用 justify-content/align-items 居中；margin: 0 auto 失效多因宽度未设或元素脱离文档流；绝对定位居中需确保父容器有 position: relative 且 transform 完整书写；flex 垂直居中失败通常源于父容器高度塌陷。
text-align: center 没反应，先查父容器是否被 flex/grid 覆盖
很多人给 <p></p> 或 <h1></h1> 加了 text-align: center 却发现文字还是左对齐，根本原因不是样式没写，而是父容器用了 display: flex 或 display: grid —— 这两种布局会完全忽略 text-align 对子元素的控制，它只管自己内部的文本流（比如 <span></span>），不管块级子元素的排布。
常见表现：<div class="container"><h1>标题</h1></div> 中，.container 设了 display: flex，此时 h1 上的 text-align: center 无效；但如果你把 text-align: center 移到 .container 上，它对 h1 本身没用（h1 是块级），只对其中的行内内容起作用。
- 真正生效的写法：在
h1或p自身上加text-align: center，且确保它的父容器没启用 flex/grid - 如果必须用 flex 布局，又想让文字居中，就别依赖
text-align，改用justify-content: center+align-items: center控制整个子元素盒子的位置 - 检查方式：浏览器开发者工具里看
Computed标签页，确认text-align是否被标记为inactive，并溯源到哪条规则覆盖了它
margin: 0 auto 不动，90% 是 width 缺失或元素脱离文档流
margin: 0 auto 只对「有明确宽度」的块级元素生效，它靠浏览器计算左右外边距均分剩余空间来实现居中。一旦宽度是 auto（默认值）或 100%，就没空间可分，自然不动。
更隐蔽的问题是：元素被 float、position: absolute 或 position: fixed 拉出了文档流，此时 margin: 0 auto 完全失效——它只作用于正常流中的块级元素。
- 必须显式设置
width（如width: 400px或width: 80%），不能是100%（无剩余空间） - 检查元素是否被设了
float: left/right，若有，清除浮动或改用 flex 替代 - 检查是否误加了
position: absolute，若需定位居中，请改用top: 50%; left: 50%; transform: translate(-50%, -50%) - 父容器如果是
display: flex或display: grid，margin: 0 auto也会被忽略
绝对定位居中偏移，重点看定位上下文是否可靠
用 position: absolute + top: 50%; left: 50%; transform: translate(-50%, -50%) 居中时，最常出问题的是定位上下文错乱：如果父容器没设 position: relative（或 absolute/fixed），top: 50% 就会相对于视口（viewport）计算，滚动页面时元素立刻“飘走”。
另一个易漏点是伪元素干扰，比如 .scallop::after 设了 position: absolute 且 bottom: -50px，这会让父容器高度塌陷，导致 top: 50% 的基准线错位。
- 父容器必须有
position: relative（除非你明确要相对视口定位） - 避免在同一个父容器里混用
position: absolute和float，它们会相互破坏高度计算 - 如果父容器高度由内容撑开，而内容含图片或字体未加载完，会出现短暂“闪动”，可加
min-height或aspect-ratio缓解 -
transform: translate(-50%, -50%)必须完整写，不能拆成两个单独声明，否则易遗漏
flex 布局 align-items 失效，八成是父容器高度塌陷
display: flex + align-items: center 看似简单，但垂直居中失败几乎全是父容器高度问题：如果父容器没设 height、min-height 或没被内容撑开，它的高度就是 0，align-items 就找不到“中心”在哪。
尤其注意 body 或 html 根元素：它们默认没有高度，直接在 body 上写 display: flex; align-items: center 是无效的，必须配合 min-height: 100vh。
- 父容器必须有明确高度，例如
height: 100vh、min-height: 100vh，或内部有足够内容撑开 - 不要在子元素上同时写
margin: auto，Safari 中会和 flex 居中冲突，造成上下偏移 - 子元素若设了
width: 100%，它仍会撑满父容器，看起来像没居中，实际是justify-content没机会生效 - 检查
Computed面板里的height值，确认父容器真实高度是否符合预期
真正卡住人的，往往不是写错某一行代码，而是某个父级容器悄悄改变了布局上下文——比如一个没声明 position 的祖先元素，被后代的 absolute 拉进了定位流；或者一个 grid 容器，无声覆盖了所有 text-align 行为。排查时，从目标元素往上逐层看 Computed 样式，比重写 CSS 更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
