仅设top:50%和left:50%会使图片左上角对齐视口中心，需transform:translate(-50%,-50%)将其中心点精准居中，且必须声明宽高，否则百分比无参照导致偏移或消失。
直接用 position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%) 就能实现，但必须确保图片有明确宽高，否则会偏移或“消失”
为什么只写 top: 50% 和 left: 50% 不行
因为 top: 50% 是让元素**上边缘**落在视口垂直中线，left: 50% 是让**左边缘**落在水平中线 —— 图片实际是“左上角对齐中心”，不是“居中”。transform: translate(-50%, -50%) 的作用就是把元素自身向左、向上各挪动自己宽高的 50%，从而让它的中心点真正落到屏幕中心。
transform 必须配合 position: fixed 使用吗
不是必须，但这是最稳妥的方案。其他方式的问题：
-
position: absolute依赖最近的定位祖先，容易受父容器影响 -
margin: auto在fixed下无效（除非同时设top/bottom/left/right） -
flex或grid居中需额外包裹层，且要确保根容器撑满全屏（比如html, body { height: 100% }）
而 fixed 脱离文档流，直接相对于视口定位，不受层级干扰，适合弹窗、加载图、水印等场景。
立即学习“前端免费学习笔记（深入）”；
常见踩坑点和修复方式
以下问题几乎都源于 CSS 继承或默认行为被忽略：
- 图片没显示？检查是否设置了
width和height——img元素在fixed下不会自动继承父宽高，不设尺寸就可能渲染为 0×0 - 图片抖动或模糊？
transform可能触发亚像素渲染，加will-change: transform或backface-visibility: hidden缓解 - 移动端缩放后错位？
fixed在 iOS Safari 某些版本下对transform支持不稳定，可改用inset: 0; margin: auto;配合width/height显式声明（需设position: fixed且宽高非auto） - 页面滚动时图片“粘”在原地不动？这正是
fixed的预期行为；如果想随页面滚动，就该用absolute或普通流式布局
img.centered {
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 150px;
transform: translate(-50%, -50%);
}
关键细节：没有宽高，translate 里的百分比就失去参照，整个居中逻辑失效。这不是 bug，是 CSS 计算规则本身决定的。
