关键在容器提供二维居中上下文：用flex布局，父容器设display: flex、justify-content: center、align-items: center和height: 100vh，图片设max-width: 100%、height: auto。
响应式图片要同时做到「随窗口缩放」和「垂直+水平居中」，关键不在 img 标签本身，而在它所处的容器是否提供了稳定的二维居中上下文。单独设 max-width: 100% 或 margin: 0 auto 只能解决水平方向，垂直方向必须靠容器高度控制 + 布局机制协同。
用 flex 实现视口级响应式居中（推荐）
这是目前最可靠、代码最少、天然响应缩放的方式。核心是让父容器占据可测量的高度（比如视口高），再用 flex 的两个轴向控制居中。
- 父容器必须设
display: flex、justify-content: center（水平）、align-items: center（垂直） - 容器高度需明确——
height: 100vh最常用；若用于内容区，可用min-height: 100vh避免内容少时留白过多 -
img只需加max-width: 100%和height: auto，不设固定宽高，否则会破坏响应性 - 避免给
img加margin: auto——在 flex 容器里它无效，还可能干扰对齐逻辑
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <img src="photo.jpg" alt="logo" style="max-width: 100%; height: auto;"> </div>
text-align + margin:auto 仅适用于纯水平居中
如果你只需要水平居中（比如页眉 logo、文章内插图），且要兼容老浏览器（IE9+），这个组合依然有效，但它完全不处理垂直方向。
- 父容器设
text-align: center，img保持默认inline即可居中 - 若把
img改成display: block，就必须配margin: 0 auto，否则失效 - 常见错误：父容器宽度被内容撑开、或有
float/position: absolute干扰了块级上下文 - 垂直方向得另想办法：比如用
padding-top、line-height（单行文本场景），或在外层再套一层 flex 容器
Grid 布局实现简洁双向居中
如果项目已使用 CSS Grid，place-items: center 是比 flex 更简短的替代方案，语义更清晰，但兼容性略低（IE 不支持）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: grid和place-items: center，等价于justify-items: center; align-items: center - 同样需要明确容器高度（如
height: 100vh），否则 grid 无法推导垂直对齐基准 -
img仍要加max-width: 100%和height: auto，否则大图在窄屏下会溢出 - 注意：不要和
grid-template-areas混用，除非你真需要复杂网格结构——简单居中没必要
<div style="display: grid; place-items: center; height: 100vh;"> <img src="photo.jpg" alt="logo" style="max-width: 100%; height: auto;"> </div>
为什么图片在 flex 容器里还是没垂直居中？
这不是代码写错了，而是容器本身没提供可参考的垂直空间。flex 的 align-items 依赖父容器有明确高度，否则它按内容高度收缩，导致“居中”失去意义。
- 检查父容器是否遗漏
height或min-height——height: auto或未设置高度时，align-items: center无效果 - 确认父容器没被其他样式限制：比如
overflow: hidden裁剪了内容，或position: absolute导致脱离文档流后高度塌陷 - 避免嵌套多层 flex：外层 flex 设了
align-items: center，内层又套 flex 容器，容易因高度传递断裂而失效 - 移动端 Safari 旧版本对
100vh有 bug（地址栏显示/隐藏时高度跳变），可改用100dvh（2026 年已广泛支持）
真正卡住人的往往不是“怎么写”，而是“为什么写了没反应”——重点盯住容器高度是否真实存在、img 是否被意外设了固定尺寸、以及浏览器是否在用旧版 viewport 行为。这些点漏掉一个，居中就会失效。
