图片在div中水平居中需设display:block+margin:0 auto；垂直水平居中首选flex布局（justify-content:center;align-items:center），需父容器有明确高度；老浏览器可用absolute+transform；line-height+vertical-align仅适用于单行图文混排。
图片在 div 里水平居中：用 margin: 0 auto 最直接
只要图片是块级元素，且父 div 有明确宽度（或撑开），margin: 0 auto 就能稳稳居中。很多人漏掉关键一步：图片默认是行内元素，margin 对它无效。
- 必须加
display: block或display: inline-block（后者需配合父容器text-align: center） -
width不强制要求（比如设width: 100%或max-width: 400px），但若图片本身超宽又没限制，auto会失效 - 别在父
div上盲目加text-align: center——它会让所有子文本、按钮也跟着居中，容易引发意外对齐
图片在 div 里垂直+水平居中：优先选 display: flex
现代项目里，display: flex 是最可靠、代码最少的方案，兼容性已覆盖所有主流浏览器（IE11+ 需加 -ms- 前缀，但基本可忽略）。
- 父
div加display: flex; justify-content: center; align-items: center - 图片无需额外样式，
width/height可自由设（包括auto、max-width、响应式单位） - 注意：如果父
div高度未定义（比如只靠内容撑开），垂直居中会失效——得确保父容器有明确高度（height、min-height或flex: 1等）
兼容老浏览器（IE9–IE10）：用 position: absolute + transform
这个组合比负 margin 更安全，不用知道图片具体尺寸，但依赖 transform（IE9+ 支持，IE8 不行）。
- 父
div设position: relative - 图片设
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 如果父容器高度不固定，
top: 50%可能偏移——此时建议改用display: table-cell（需额外 wrapper，且margin失效） - 慎用
display: table-cell：它让父容器失去margin和padding的常规行为，调试时容易卡住
单行图文混排时的垂直居中：用 line-height + vertical-align
仅适用于纯单行场景（比如图标+文字并排），不是通用居中方案，但轻量、无布局干扰。
- 父容器设
line-height等于其高度，再加text-align: center - 图片加
vertical-align: middle，否则可能底部对齐留白 - 一旦换行或内容变多，
line-height就失控——这时候必须切回 flex 或绝对定位 - 不要试图用
vertical-align: middle单独让图片在块级容器里垂直居中，它只对行内上下文生效
margin: 0 auto 看着稳妥，但忘了 display: block，图片就纹丝不动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
