display: flex+justify-content:center+align-items:center可实现图片正中间居中，但必须满足父容器启用flex、有明确高度、图片未脱离文档流三条件；margin:0 auto和text-align:center仅水平居中且各有失效前提。

用 display: flex 实现居中，但必须确保父容器有明确高度、图片不脱离文档流、且未被内联宽高干扰——缺一不可。

为什么 margin: 0 auto 或 text-align: center 单独用会失效

这两个方法只解决水平方向：margin: 0 auto 对默认 inline 的 <img> 完全无效，必须加 display: block；而 text-align: center 只作用于父容器，且对 float、position: absolute 或 flex 子项无影响。垂直方向它们完全不控制，缩放后图片仍贴顶。

• margin: 0 auto 在 display: flex 父容器里会被忽略
• 图片带内联 width 或 height（如 <img style="max-width:90%">）会覆盖 max-width: 100%
• 父容器没设宽度或高度（比如空 <div>），居中就失去参照空间 <h3>用 <code>display: flex 居中必须满足的三个硬条件

  写了 justify-content: center 和 align-items: center 却没效果？问题几乎都出在这三处：

  

  anything-to-html

  将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

  下载
  • 父容器没设 display: flex（只给 <img> 加没用）
  • 父容器高度塌陷：没写 height、min-height 或 100vh，align-items: center 就没垂直空间可居中
  • 图片本身加了 float、position: absolute，或被外层 grid/inline-block 包裹，导致脱离文档流

  max-width: 100% + height: auto 是缩放不变形的最小必要组合

  只写 width: 100% 会强行拉伸小图、模糊高清图；漏掉 height: auto 则浏览器可能按默认值（如 0）渲染高度，造成变形或塌陷。

  • 推荐写法：style="max-width: 100%; height: auto;"
  • 窄屏兼容补丁：iOS 15 以下 Safari 可能忽略 max-width，加 width: 100% 强制覆盖
  • 避免用 vw 直接设宽（如 width: 90vw），横竖屏切换时可能不重绘
  • 若父容器是 flex，默认 min-width: auto 会阻止图片收缩，需额外加 min-width: 0

  移动端和旧环境的兼容补丁

  现代 Chrome/Firefox/Safari 基本没问题，但真正在意兼容性时得处理这些细节：

  • Android 4.4 及以下 WebView 需加 display: -webkit-flex
  • iOS Safari 旧版对 max-width: 100% 支持不稳定，建议搭配 width: 100%
  • 语义化要求：图片是内容时必须保留 alt，否则某些安卓 WebView 会跳过缩放逻辑
  • 别直接在 上加 display: flex——它会让所有直系子元素变成 flex item，破坏原有结构

  真正容易被忽略的是父容器是否形成 BFC 并拥有高度上下文。80% 的“居中失败”，不是 CSS 写错了，而是 <div> 没高度、没宽、或者被其他样式悄悄接管了布局流。</div>