图片不居中主因是上下文错配：img默认为行内元素，margin: 0 auto需配合display: block且父容器有明确宽度；text-align: center必须作用于父块级容器，且不能被flex/grid覆盖。
图片加了 margin: 0 auto 或 text-align: center 却不居中，基本不是 CSS 写错了，而是上下文没搭对——img 默认是行内元素，它只响应父容器的文本对齐，且自身必须“在块级流里能被测量”。
为什么 margin: 0 auto 对 img 无效
这是最常卡住人的点：浏览器默认把 img 当作 inline 元素，而 margin: 0 auto 只对块级（display: block）或替换类块级元素生效。
- 必须同时设
display: block或display: inline-block - 父容器得有明确宽度（比如
width: 100%、max-width: 600px），否则auto没参照可分 - 别给父容器加
float、position: absolute或display: flex（除非你主动控制对齐）——这些会直接让margin: auto失效 - 老浏览器（如 IE8）还要求显式写
width，哪怕只是width: auto
text-align: center 必须写在父容器上
text-align 是个“传染性”属性，但它只作用于**直系子元素中的行内级内容**，对 img 生效的前提是：img 保持 inline（默认状态即可），且父容器本身是块级、未被 flex/grid 覆盖。
- 正确写法：
- 错误写法：
text-align不作用于自身） - 如果父容器是空的、或没内容撑开，它的宽度可能是
0，居中就“看不见”——补一句width: 100%或放个临时文字验证 - 某些主题（如 Zakra、Neve）会用高优先级规则把
img强制设为block，这时text-align就失效了，得先重置display: inline
现代项目首选：Flex 布局居中
它不依赖 img 的显示类型，也不用纠结父容器是否“有内容”，但必须主动控制父容器行为。
- 水平居中：
display: flex; justify-content: center; - 水平 + 垂直居中：
display: flex; justify-content: center; align-items: center;——但父容器必须有明确高度（如height: 400px或min-height: 100vh） - 如果父容器下还有其他元素，它们也会变成 flex item，
float、vertical-align、传统margin全部失效 - 响应式时，直接在媒体查询里改
justify-content值即可，比如小屏center、大屏flex-end
动态尺寸图片唯一可靠方案：绝对定位 + transform
当图片宽高未知（如用户上传头像、懒加载未完成）、或需要脱离文档流（遮罩层、加载图标），position: absolute + transform: translate(-50%, -50%) 是目前最稳妥的二维居中方式。
- 父容器必须设
position: relative，否则absolute会相对于body定位 - 必须同时写
top: 50%和left: 50%，再用transform回拉；单写transform不生效 - 图片宽高未加载完成时可能出现顶部闪动，可提前设
min-height或用aspect-ratio缓解 - 注意：这个方案和
srcset、sizes完全兼容，不影响响应式逻辑
真正容易被忽略的是“上下文污染”——主题 CSS、构建器生成的内联样式、插件注入的 class，都可能悄悄覆盖你的居中规则。调试时优先用浏览器开发者工具检查 computed 样式，而不是反复改自己的 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
