图片在div中margin:0 auto不生效，因默认inline需设display:block或inline-block；更推荐flex布局（display:flex;justify-content:center），但父div必须有有效宽度。
图片在 div 里用 margin: 0 auto 不生效？先看 display 类型
直接写 margin: 0 auto 对图片没反应，不是代码写错了，而是图片默认是 inline 元素，它不认这个居中逻辑。
必须让图片变成块级（block）或行内块（inline-block），margin: 0 auto 才能起作用。
-
display: block最常用：加了就立刻生效，但图片会独占一行 -
display: inline-block适合需要和文字并排的场景，但要注意父容器可能有空白字符导致微小偏移 - 别漏掉
width：哪怕只是width: auto，有些老浏览器（比如 IE8）对margin: 0 auto要求显式宽度
更稳妥的现代写法：用 flex 布局替代 margin
不用纠结 display 类型、不用设 width、兼容性也够用（IE10+），flex 是目前最省心的方案。
只要给父 div 加两行 CSS：
display: flex; justify-content: center;
- 不需要改图片本身的样式，也不用担心
inline或block问题 - 如果图片是响应式（比如
max-width: 100%），它依然能自适应居中 - 注意：父
div高度没撑开时，图片可能“看不见”——检查是否忘了设height或内容流高度
图片本身带宽高，但父 div 没设尺寸，居中会失效
常见现象：图片明明写了 margin: 0 auto 或用了 flex，却贴着左边；打开开发者工具一看，父 div 宽度只有 0px。
- 父
div如果是空的，或者只含inline内容又没设width，它的宽度就是“包裹内容”，而图片没被识别为块级时不算有效内容宽度 - 解决方法：给父
div显式设width（比如width: 100%），或确保它有其他块级子元素撑开宽度 - 用
flex时也一样：如果父div被压缩到 0 宽，justify-content: center就没空间可居中
移动端图片居中还要防缩放和溢出
在手机上，图片可能比屏幕宽，强行居中后左右被裁切，用户看不到全图。
- 加
max-width: 100%和height: auto是基础，否则图片会撑破容器 - 如果父
div用了flex，记得补一句align-items: center，避免图片垂直方向错位 - 慎用
object-fit：它能控制图片如何填满容器，但 iOS Safari 旧版本支持不稳，测试时要真机跑一遍
flex + justify-content: center 就够了，但得盯住父容器有没有真实宽度——这点最容易被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
