最稳的图片居中方案是 display: flex + justify-content: center + align-items: center，但需父容器有明确高度且图片不脱离文档流；text-align: center 仅水平居中且依赖 inline 元素特性，无法垂直居中。

用 display: flex + justify-content: center + align-items: center 是最稳的方案，但必须给父容器设明确高度，且图片不能脱离文档流。

为什么 text-align: center 只能水平居中，且常失效

它只作用于行内级子元素，<img> 默认是 inline，所以加在父容器上才有效；但一旦父容器宽度被浮动、inline-block 或内容撑窄，居中就会偏移。更关键的是：它完全不控制垂直方向——图片仍会贴顶。常见错误是给 <img> 自己加 style="text-align: center"，这毫无作用。

适用场景有限：

• 纯图文段落里单张配图
• 不需要垂直控制的 banner 或 logo 区
• 需兼容 IE9 等老环境时的降级方案

margin: 0 auto 水平居中失败的三个硬条件

这个组合看似简单，但缺一不可：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• display: block（或 inline-block），否则 margin 不生效
• 图片必须有可计算宽度：显式 width: 300px，或依赖固有尺寸；max-width: 100% 或 width: 100% 会让 auto 失效
• 父容器不能是 flex 或 grid 容器，否则 margin 被布局模型接管

它也不管垂直方向，图片默认仍按文档流顶部对齐。

立即学习“前端免费学习笔记（深入）”；

Flex 实现真正“容器内居中”的关键细节

要让图片在父容器内部水平+垂直都居中，必须同时满足：

• 父容器设 display: flex、justify-content: center、align-items: center
• 父容器有明确高度：比如 height: 400px、min-height: 300px 或 height: 100vh；否则交叉轴（垂直方向）长度为 0，“居中”无从计算
• 图片不能加 position: absolute 或 float，否则脱离文档流，flex 规则直接跳过它
• 推荐加 max-width: 100% 和 height: auto，防止宽屏溢出、窄屏变形

示例：

<div style="display: flex; justify-content: center; align-items: center; height: 400px; border: 1px solid #ccc;">
  <img src="photo.jpg" alt="icon" style="max-width: 100%; height: auto;">
</div>

响应式缩放时图片不溢出、不变形的底线配置

仅居中不够，还要防拉伸和越界：

• max-width: 100% 必须加在 <img> 上，不是父容器
• height: auto 必须同步设置，否则宽高比崩坏
• 避免只写 width: 100% —— 它强制拉伸，会失真
• 若需留白，可用 max-width: 90vw 替代 100%，配合 margin: 0 auto 更安全
• 媒体查询里只需覆盖对齐方式（如 text-align: left），不用重复写图片尺寸

真正容易被忽略的是：父容器的 box-sizing: border-box 和 padding 会影响最终可视区域，尤其在移动端边距敏感时。