margin: 0 auto 对图片无效是因为 img 默认为行内元素，需设 display: block 或 inline-block 才生效；text-align: center 应作用于父容器；Flex 布局（justify-content: center）和绝对定位+transform 是更可靠方案。
margin: 0 auto 对图片无效？大概率是 img 还是行内元素，没加 display: block；text-align: center 写在 img 自身上也没用，它只对父容器生效。
为什么 margin: 0 auto 不生效
这是最常卡住人的点：浏览器默认把 img 当作 inline 元素，而 margin: 0 auto 只对块级（block）或替换类块级元素起作用。
- 必须同时设置
display: block或display: inline-block - 父
div得有明确宽度（比如width: 400px或width: 100%），否则auto没参照可分 - 别给
img加float、position: absolute或display: flex的父容器——这些会直接让margin: auto失效 - 老浏览器（如 IE8）还要求显式写
width，哪怕只是width: auto
text-align: center 怎么用才对
这个方法最轻量，但只管“水平居中”，且只在父容器上设才有效。它适合单图、图文混排、或一组并排小图的场景。
- 给包裹
img的div（或p、section）加style="text-align: center" - 确保父容器不是
display: flex/display: grid/float，否则text-align被忽略 -
img保持默认inline状态即可，不用改display - 如果父
div是空的或没内容撑开，宽度为 0，居中就“看不见”——补个width: 100%或放个
Flex 布局实现真正可控居中
现代项目首选。它不依赖 img 的显示类型，也不用纠结父容器是否“有内容”，但必须主动控制父容器行为。
立即学习“前端免费学习笔记（深入）”；
- 给父
div加display: flex; justify-content: center;→ 水平居中 - 再加
align-items: center;→ 垂直居中（前提是父div有高度，比如height: 300px或min-height: 100vh） - 如果图片是响应式的（
max-width: 100%），它仍能自适应缩放并居中 - 注意副作用：父容器下所有直系子元素都会变成 flex item，
float、vertical-align、传统margin全部失效
绝对定位 + transform 居中（宽高未知时唯一可靠方案）
当图片尺寸动态加载、或你无法预知宽高（比如用户上传头像），top: 50%; left: 50%; transform: translate(-50%, -50%) 是目前最稳妥的二维居中方式。
- 父
div必须设position: relative，否则absolute会相对于body定位 -
top: 50%; left: 50%把图片左上角挪到容器中心，transform: translate(-50%, -50%)再把它往回拉自身一半尺寸 - 不需要知道图片宽高，也不依赖父容器是否设了
width/height - 移动端要注意：如果父容器没设
overflow: hidden，图片超出部分可能被看见或触发横向滚动条
真正容易被忽略的是父容器的“存在感”——它有没有宽度、有没有高度、有没有被其他 CSS（比如 float 或 display: contents）悄悄清空。调试时先打开开发者工具看一眼父 div 的盒模型，比反复改 img 样式更省时间。
