text-align: center 对 div 无效，因其仅作用于行内内容；使子 div 居中需用 width + margin: 0 auto 或 flex 布局；margin: 0 auto 失效常见于无宽、非块级或父为 flex/grid；flex 中 align-items 失效多因父容器高度未定义；absolute + transform 居中需父设 position: relative。
text-align: center 对 div 无效？先确认元素类型
很多人给父容器加 text-align: center，指望里面一个 div 自动水平居中——它不会动。因为 text-align 只作用于**行内内容**（文字、img、span），对块级子元素完全没影响。
常见错误现象：div 里套了另一个 div，外层设了 text-align: center，内层仍靠左；或者误以为给 img 加 display: block 后还能靠 text-align 居中（其实此时它已脱离行内流）。
- 想让文字或图标居中：直接在父容器上设
text-align: center - 想让子
div居中：要么给它设width+margin: 0 auto，要么用display: flex父容器 -
img默认是inline-block，所以text-align: center对它有效；但一旦加了display: block，就得换方案
margin: 0 auto 不生效？检查三个硬性条件
margin: 0 auto 看似简单，失效却高频。它不是“只要写了就居中”，而是依赖浏览器严格计算剩余空间——没空间，就不分配。
典型失效场景：div 写了 margin: 0 auto 却纹丝不动；或者在 Flex 容器里加了也毫无反应。
- 目标元素必须是块级（
display: block或默认块行为），inline或inline-block元素不响应 - 必须显式设置
width或max-width（不能是100%或auto） - 父容器不能是
display: flex或display: grid——这两种布局会接管对齐逻辑，覆盖margin: auto
flex 居中时 align-items 失效？父容器高度塌陷是元凶
写好 display: flex; justify-content: center; align-items: center，结果元素只水平居中、垂直方向卡在顶部——大概率是父容器没高度。
align-items 依赖父容器的**可用高度空间**，如果父容器高度未定义（比如只写了 height: auto 或干脆没设），它就按内容撑开，align-items: center 实际无处可“居中”。
- 若需在视口内垂直居中：父容器加
height: 100vh - 若嵌套在某个已有结构中：确保父容器有明确高度（如
height: 400px或min-height: 300px） - 别在子元素上同时写
margin: auto——Flex 下它会被忽略，还可能干扰渲染
绝对定位 + transform 居中偏移？父容器定位上下文常被忽略
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 是脱离文档流场景下的可靠方案，但一滚动就跑偏，往往是因为父容器没设定位上下文。
浏览器会把 top: 50% 和 left: 50% 相对于**最近的已定位祖先**计算；如果没有，就退到视口（body 或 html），滚动时自然失准。
- 父容器必须设
position: relative（或absolute/fixed），否则top/left会向上找，直到body -
transform: translate(-50%, -50%)是关键，它基于自身宽高计算，不依赖尺寸是否已知 - 该组合只对**直接子元素**生效，后代元素需额外处理
真正容易被忽略的，是居中从来不是单点问题——它永远牵扯到元素类型、父容器样式、文档流状态三者联动。改一行 CSS 前，先看清楚你动的是谁的盒模型、谁的上下文、谁的计算依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
