text-align: center居中图片最轻量，需作用于父容器且仅水平居中；因默认inline，margin: auto无效，常见错误是错加在img自身或父容器无宽。
用 text-align: center 居中行内图片最轻量
默认 <img> 是 inline 元素，margin: auto 对它完全无效。直接给父容器加 text-align: center 就能水平居中，无需改 display，也不依赖宽高声明。
常见错误现象：img { margin: 0 auto; } 写了但没效果——因为没配 display: block，或父容器本身没内容宽度（比如 <div> 没设 <code>width 或 max-width）。
- 适用场景：文章正文内单张插图、卡片标题图等父容器宽度可控的场合
- 注意：只管水平，垂直方向由
line-height或padding影响；若父容器高度不固定，别指望它自动垂直居中 - 响应式安全：配合
max-width: 100%和height: auto，缩放时不会溢出
display: flex + justify-content/align-items 同时搞定水平+垂直
这是目前最稳、最通用的方案，尤其适合容器高度不确定（如视口全高、flex 项、卡片内容区）的响应式场景。
关键点不是“用了 flex”，而是必须同时设两个属性：justify-content: center（主轴居中，通常是水平），align-items: center（交叉轴居中，通常是垂直）。漏掉任一个，就只居中一个方向。
- 父容器无需显式宽高，
height: 100vh或min-height: 400px都可触发对齐 - 如果父容器是
flex-direction: column，那justify-content就管垂直，align-items管水平——方向会翻转，别硬记，看flex-direction值就行 - 避免踩坑：别在子
<img>上再写margin: auto，它会覆盖align-items行为，且只生效于单方向
object-fit 必须和尺寸约束一起用，否则等于没写
想让图片“撑满又不拉伸”？只写 object-fit: cover 或 contain 不起作用。浏览器根本不知道“满”是指多大范围。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
必须搭配明确的尺寸控制：
-
object-fit: cover→ 推荐width: 100%; height: 100%（父容器需有确定高度）或max-width: 100%; max-height: 100%（更安全，适配不定高容器） -
object-fit: contain→ 更适合配width: 100%; height: auto，避免压缩变形 - 性能提示：用
object-fit的图片，渲染时会触发额外的图像重采样，低端设备上可能轻微卡顿；纯装饰图建议改用background-image+background-size
place-items: center 看似简洁，但有隐藏前提
写 display: grid; place-items: center 确实一行搞定，但它要求父容器至少有一个方向的尺寸可被计算出来——要么显式写了 width/height，要么靠 100vh、fit-content 或内容撑开。
典型失效场景：<div style="display: grid; place-items: center"><img></div>，外面什么都没设，结果图片贴左上角——不是语法错，是 grid 容器自身宽高为 auto，没空间可居中。
- 兼容性：Chrome 68+/Firefox 63+/Safari 12.1+ 支持，IE 完全不支持
- 比 flex 更少侵入：不需要指定
flex-direction，也不用担心主/交叉轴混淆 - 容易被忽略的点：如果父容器是
grid但已定义了grid-template-rows或grid-template-columns，place-items仍有效，但仅作用于每个网格单元内部
<img> 加绝对定位），或者忘了尺寸约束这个前提。先确认方向、元素类型、父容器是否可测量，再选方案，比反复试 CSS 更省时间。
