绝大多数“居中代码无效”源于渲染前提未满足：父容器缺显式高度、子元素脱离文档流或居中机制作用层级错误，需逐层检查高度透传、display/position 计算值及对齐属性生效范围。
绝大多数“写了居中代码却无效”的情况，不是语法写错，而是渲染前提没满足——display: flex、place-items: center 或 transform: translate(-50%, -50%) 都依赖特定的上下文条件，缺一不可。
父容器没设高度，flex/align-items 就是摆设
Flex 垂直居中（align-items: center）需要父容器在交叉轴（默认为 Y 轴）上有明确的可用空间。如果父容器 height 是 auto 且子元素又没撑开它，那“垂直居中”就无从谈起。
- 必须给父容器加显式高度，比如
height: 100vh、min-height: 400px或height: 300px -
body和html默认有 margin 和 height: auto，记得先重置：html, body { height: 100%; margin: 0; } - 如果父容器是 flex 项目本身（比如嵌套在另一个 flex 容器里），它的高度由父级 flex 容器决定，需逐层确认高度是否透传
子元素脱离文档流，flex 就直接“看不见”它
一旦子元素用了 position: absolute、float 或 display: contents，它就不再是 flex 项目，justify-content 和 align-items 对它完全不生效。
- 检查子元素 computed styles 中的
display和position，确认它确实是普通块级或 inline-block 子元素 - 不要在 flex 容器里混用
margin: auto和justify-content，可能触发未定义行为 - 如果必须用绝对定位子元素，那就别指望 flex 居中——改用
position: absolute + transform方案
Grid 的 place-items: center 不是“全局居中开关”
place-items: center 只控制网格项（grid items）在其网格区域（grid area）内的对齐方式。如果父容器没定义网格轨道（grid-template-rows/grid-template-columns），浏览器会按内容自动创建单行单列，此时视觉上可能看不出变化。
- 确保父容器已声明
display: grid，且至少有一行一列的显式定义，例如：grid-template-rows: 1fr或grid-template-columns: 1fr - 如果父容器已有复杂网格结构（如
grid-template-areas），place-items可能被某个具体网格项的justify-self/align-self覆盖 - 用开发者工具检查该元素的 computed
align-items值，确认它最终是否为center
绝对定位 + transform 的两个 -50% 容易理解反
transform: translate(-50%, -50%) 中的两个百分比，都是相对于**元素自身宽高**，不是父容器。第一个 -50% 是向左移动自身宽度的一半，第二个是向上移动自身高度的一半。很多人误以为是“相对父容器 50% 位置再偏移”，导致调试时反复调 top/left 却越调越偏。
- 父容器必须设
position: relative（或其他非static值），否则top: 50%会相对于初始包含块（通常是 viewport）计算 - 子元素无需定宽高，
width: auto或fit-content都能正常工作 - 旧版 Safari（iOS 7–9）需加前缀：
-webkit-transform: translate(-50%, -50%)
真正卡住人的往往不是“怎么写”，而是“为什么写了没反应”——重点盯住父容器的高度来源、子元素是否还在文档流里、以及你用的居中机制到底作用在哪个层级上。这些点一旦漏查，再标准的代码也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
