绝对定位 + transform: translate(-50%, -50%) 能居中，是因为 top/left: 50% 先将元素左上角移至父容器中心，再通过 transform 以其自身宽高为基准反向偏移一半，使视觉中心对齐；父容器必须设 position: relative，否则参考系变为视口。
绝对定位 + transform: translate(-50%, -50%) 为什么总偏右下？
因为 top: 50% 和 left: 50% 只把元素左上角拉到父容器中心点，不是让元素“整体居中”。漏掉 transform: translate(-50%, -50%)，视觉上必然右偏、下偏。
- 必须给父容器加
position: relative（或absolute/fixed），否则top/left会相对于视口计算，滚动时飘走 -
transform: translate(-50%, -50%)的百分比是按元素自身宽高算的，所以它不依赖固定尺寸，适合动态内容 - 如果父容器本身有
transform（比如缩放或旋转），一般不影响子元素定位参考系；但若用了transform-style: preserve-3d，可能改变层叠上下文，需实测
Flexbox 居中失效的三个高频原因
写了 display: flex、justify-content: center、align-items: center 却没效果，大概率是以下某条没满足：
- 父容器没设明确高度（如
height: 100vh或被内容撑开）——align-items: center在交叉轴上需要长度参考 - 子元素加了
margin: auto—— Safari 中会和 flex 居中冲突，导致上下偏移，务必删掉 - 父容器被其他样式干扰：比如同时用了
float、position: absolute，或者子元素display设为table等非标准 flex item 类型
Grid 的 place-items: center 能不能无脑用？
语法最简，但兼容性和上下文限制比想象中多：
- IE11 完全不支持
place-items，需回退到justify-items: center; align-items: center; - 如果父容器已有
grid-template-areas或复杂轨道定义，place-items可能覆盖原有对齐逻辑，建议只用于单个子元素的简单居中场景 - 它对所有直接子元素生效，不像 flex 那样可单独控制某个 item；若父容器含多个子项又只想居中其中一个，得换方案
text-align: center 和 margin: 0 auto 混用常见翻车点
text-align: center 只影响行内内容（文本、img、span），对块级子元素无效；margin: 0 auto 只对块级且有明确宽度的元素生效。两者混用常因语义错位出问题：
立即学习“前端免费学习笔记（深入）”；
- 给块级子元素自己加
text-align: center，指望它居中——实际只是让内部文字居中，元素本身纹丝不动 - 父容器用了
display: flex，子元素再写margin: 0 auto—— flex 布局已接管外边距行为，该声明会被忽略 - 想让图片居中却只设
text-align: center，但图片父容器没设宽高或line-height，导致垂直方向没支撑，仅水平有效
margin: 0 auto，也要求元素在块级格式化上下文中；而 transform 方案在字体加载完成前可能闪动——这些细节不提前预判，上线后就是隐性 bug。 
