最直接、最可控的方式是给图片父容器设 display: flex、justify-content: center 和 align-items: center；需确保父容器有明确高度（如 min-height: 100vh），图片加 max-width: 100% 和 height: auto，且父容器不能被 float、absolute 或 grid 覆盖。
用 flex 布局实现响应式图片的水平+垂直居中
最直接、最可控的方式是给图片的父容器加 display: flex，配合 justify-content: center 和 align-items: center。它天然响应窗口缩放，不需要手动监听 resize 或写 JS。
关键点不是“怎么写样式”，而是“谁来写样式”：必须作用在 <div> 这类父容器上，<code><img> 自身加这些属性完全无效。
- 父容器必须有明确高度（比如
min-height: 100vh或固定值），否则align-items: center看不出效果 - 图片自身建议加
max-width: 100%和height: auto，防止宽屏下溢出或窄屏下过小 - 旧版 Android 浏览器（4.4 及以下）需补
display: -webkit-flex - 如果父容器已有
float、position: absolute或被设为display: grid，flex 会失效
示例：
<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"> @@##@@ </div>
为什么 margin: 0 auto 不能解决垂直居中
margin: 0 auto 只能水平居中，且只对块级元素生效——这是它最常被误用的地方。很多人以为加了 display: block 就万事大吉，结果图片还是贴顶。
根本原因：块级元素的垂直 margin 不参与文档流垂直方向的自动分配；浏览器不会“把上下空隙平分”，它只管行框高度和父容器的 line-height（对 inline 元素）或父容器的 padding（对 block 元素）。
- 若强行想用 margin 控制垂直位置，只能手动设
margin-top: 50px这类固定值，但无法响应窗口变化 - 设
margin: auto在 flex 或 grid 容器里会被忽略，因为布局引擎已接管对齐逻辑 - 图片设了
width: 100%或max-width: 100%后，margin: 0 auto的左右居中也会失效（宽度不可计算）
用 position: absolute + transform 实现精确居中
当父容器高度不固定、或需要脱离文档流时（比如 banner 上叠加 logo），position: absolute 是更灵活的选择，但必须配对使用 transform: translate(-50%, -50%)。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
常见错误是只写 top: 50%; left: 50%，这会让图片左上角落在中心点，整体偏右下约半个图片尺寸。
- 父容器必须设
position: relative，否则绝对定位会相对于 body 或最近的定位祖先 -
transform: translate(-50%, -50%)是回拉自身宽高的 50%，不是相对于父容器 - 响应式下仍需配合
max-width: 100%和height: auto，否则缩放后可能溢出 - 如果父容器用了
overflow: hidden，要确认 transform 不会触发裁剪边界问题
示例：
<div style="position: relative; width: 100%; min-height: 400px;"> @@##@@ </div>
用 place-items: center 的注意事项
这是 grid 布局中最简写法，一行代码完成二维居中，但兼容性比 flex 略差（IE 完全不支持，iOS Safari 10.3+ 才稳定）。
它只在父容器设为 display: grid 时才生效，且会隐式创建一个单格网格；如果父容器已有其他子元素或显式定义了 grid-template-rows，行为可能不符合预期。
- 不要和
flex混用：同一个父容器同时设display: grid和display: flex，后者会被覆盖 -
place-items是justify-items和align-items的简写，只影响子项在网格单元内的对齐，不控制网格轨道本身 - 若图片需响应式缩放，仍得单独加
max-width: 100%，grid 不会自动约束内容尺寸
真正容易被忽略的是：居中行为是否随视口变化而持续生效。很多方案在初始加载时居中，但窗口缩放后偏移——根源往往不在图片样式，而在父容器的高度来源（比如用 height: 100% 却没给所有祖先设高度）、或媒体查询里漏掉了对齐方式的重置。
