父容器高度为0是垂直居中失效的头号原因，因Flex或Grid的align-items: center等依赖交叉轴有可计算长度，若父容器无height/min-height且无内容撑开，则高度为0，导致垂直居中无效。
父容器高度为 0 是垂直居中失效的头号原因
Flex 或 Grid 的 align-items: center、place-items: center 都依赖交叉轴有可计算长度。如果父容器没设 height 或 min-height，且内部又没内容撑开它，那它的实际高度就是 0 —— 此时“居中”根本无从谈起。
常见现象：写了 display: flex + justify-content: center + align-items: center，但元素只水平居中，垂直方向完全不动。
- 检查 computed height：在浏览器开发者工具里看父容器的「Computed」面板，确认
height值是不是0px - 快速验证：临时加
min-height: 200px，如果立刻生效，就坐实了这个问题 - 全屏场景下优先用
min-height: 100vh；移动端 Safari 可补min-height: -webkit-fill-available - 若父容器是
<body>，别忘了html, body { height: 100%; margin: 0; }
text-align: center 对 div 无效？你可能作用错了对象
text-align: center 只控制块级容器内**行内内容**（文字、<img>、<span>）的水平对齐，它不负责让子 <div> 自身居中。很多人给子 div 加了 text-align: center，结果只是里面文字居中了，盒子本身还在左边。
典型翻车点：
立即学习“前端免费学习笔记（深入）”；
- 想让一个
<div class="card">居中，却只给它自己设text-align: center - 父容器用了
float或position: absolute，破坏了文档流，text-align失去参考基准 - 子元素是
display: inline-block，但父容器没清白空间或没设text-align: center
正确做法：把 text-align: center 放在子 div 的**父容器**上，且确保该父容器是块级、有宽度上下文。
margin: 0 auto 不生效？大概率缺了 width
margin: 0 auto 是块级元素水平居中的经典写法，但它有个硬性前提：元素必须有明确的 width（不能是 100%，也不能是 auto）。浏览器靠“剩余空间 ÷ 2”来算左右 margin，没宽度就没剩余空间。
容易忽略的细节：
- 元素被意外设成
display: inline或inline-block（比如<span>），它不响应margin: 0 auto - 父容器是
display: flex或display: grid，会直接接管子元素外边距行为，margin: 0 auto被忽略 - 元素设置了
float或position: absolute，脱离文档流后也不再适用此规则
调试建议：临时加 border: 1px solid red 看元素真实尺寸，再确认 width 是否已生效。
绝对定位居中偏移？漏了 transform 或定位上下文
position: absolute + top: 50% + left: 50% 只是把元素左上角拉到父容器中心，不是整体居中。必须配 transform: translate(-50%, -50%) 才能真正对齐视觉中心。
高频错误：
- 忘了写
transform: translate(-50%, -50%)，结果元素总偏右下 - 父容器没设
position: relative（或absolute/fixed），导致top/left相对于视口计算，滚动时飘走 - 父容器本身有
transform（如缩放），某些老版本 Chrome 下会影响定位参考系，需实测
注意：translate(-50%, -50%) 的百分比是按元素自身宽高算的，所以它天然适配动态内容，这点比固定 margin 更鲁棒。
真正卡住人的，往往不是哪个属性写错了，而是改完样式后没去看一眼父容器的 computed height 和 position 上下文——这两项查清，80% 的居中问题当场解决。
