最轻量居中方案是.img-center{display:block;margin:0 auto}，需配合max-width:100%实现响应式；容器级双向居中用.img-container-center{display:flex;justify-content:center;align-items:center}，须设父容器高度；禁用text-align:center和place-items:center作通用图片居中。
用 .img-center 类统一控制图片水平居中
直接给图片加 display: block 和 margin: 0 auto 是最轻量、兼容性最好的方式，适用于所有静态或响应式图片，且不依赖父容器高度或 flex 布局。
常见错误是只写 margin: auto 却忘了设 display: block，或者给图片设了 width: 100% 后再用 margin: 0 auto——此时图片已撑满父宽，左右没空间可居中。
.img-center { display: block; margin: 0 auto; }- 若图片需响应式缩放，额外加
max-width: 100%; height: auto; - 该类可安全用于
用 .img-container-center 类实现容器级双向居中
当图片必须严格在父容器内垂直+水平居中（比如 banner 区、模态框预览图），且父容器有明确高度或最小高度时，推荐封装容器类，而不是直接操作
Flex 是现代首选，但要注意：父容器必须设 height 或 min-height，否则 align-items: center 在无高度约束下无效；另外，justify-content: center 对行内图片也起作用，但对块级图片更可靠。
.img-container-center { display: flex; justify-content: center; align-items: center; }- 务必配合父容器尺寸定义，例如
min-height: 200px或height: 100vh - 避免在子
margin或vertical-align，会干扰 flex 对齐
响应式场景下慎用 text-align: center
很多人习惯给父容器加 text-align: center 来“快速居中图片”，但它只对行内级内容生效，且在 flex/grid 容器中完全失效——因为 flex 子项不再参与文本流。
更隐蔽的问题是：当父容器同时包含文字和图片时，text-align: center 会让文字也居中，可能破坏排版意图；而如果后续把图片改成背景图（background-image），这个样式就彻底失效了。
- 仅在纯图文混排、且确定不用 flex/grid 的老项目中使用
- 不要把它当作“通用居中方案”写进基础 CSS 类库
- 若必须复用，命名应体现语义局限，例如
.text-inline-center，而非.center
Grid 的 place-items: center 不适合图片类名直用
place-items: center 看似简洁，但它要求父容器是 display: grid，而一个只用来居中单张图片的容器，为它启用 grid 布局属于过度设计——增加了渲染开销，且在 IE11 及更早版本中不支持。
真正需要 grid 的场景是：容器内含多个可换行的图片项（如响应式画廊），或需同时控制行列间距（gap）与对齐。单图居中没必要引入 grid。
- 不要定义
.img-center-grid { display: grid; place-items: center; }作为通用类 - 若项目已全局用 grid 布局，可在局部组件中直接用，不建议抽成独立工具类
- 注意
place-items会同时影响所有子元素，图片若有图标、文字等兄弟节点，会被一并居中
实际项目中最容易被忽略的一点：**图片是否设置了 width 或 max-width，决定了 margin: 0 auto 是否真正生效**。很多响应式失败案例，根源不是居中逻辑错，而是图片在小屏下宽度变成 100%，导致左右 margin 失去计算依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
