最稳方案是display: flex + justify-content: center + align-items: center，但父容器必须有明确高度，否则垂直居中失效；常见失效原因有三：未设display: flex、父容器高度塌陷、图片脱离文档流。
直接用 display: flex + justify-content: center + align-items: center 最稳，但父容器必须有明确高度，否则垂直居中失效。
flex 布局实现响应式居中要满足三个硬条件
很多人写了 justify-content: center 和 align-items: center 却没效果，问题通常出在以下三点：
- 父容器没加
display: flex—— 只给<img>加没用 - 父容器高度塌陷：比如只设了
width或没设height/min-height，导致交叉轴（垂直方向）长度为 0 - 图片被加了
position: absolute或float—— 已脱离文档流，flex 规则不生效
正确写法示例：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"> <img src="photo.jpg" style="max-width: 90vw; height: auto;"> </div>其中
height: 100vh 是关键，max-width: 90vw 防止宽屏下图片过满、留白太小。
text-align: center 只管水平，且只对父容器生效
这个方法轻量、兼容性好，但仅适用于纯水平居中场景，且容易误用：
-
text-align: center必须写在父容器上，不是<img>自己 —— 写错位置完全无效 - 父容器若用了
float、display: inline-block或宽度被内容撑窄，会导致居中偏移 - 如果父容器里混了
<div>这类块级子元素，它们不受text-align影响，仍靠左
适用场景：图文混排段落、卡片内单图、页眉 logo。示例：
<div style="text-align: center;"> <img src="logo.png" style="max-width: 100%; height: auto;"> </div>
margin: 0 auto 要求图片是 block 且宽度可计算
这个组合只解决水平居中，但条件苛刻，任意一条不满足就失败：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须设
display: block（或inline-block），否则margin: 0 auto对行内元素无效 - 图片必须有可计算的宽度：显式
width: 300px，或依赖固有尺寸；width: 100%或max-width: 100%会让auto失效 - 父容器不能是
display: flex或display: grid，否则会接管 margin 行为
典型写法：
<img src="icon.svg" style="display: block; width: 64px; margin: 0 auto; max-width: 100%;">注意：它完全不管垂直方向，图片仍贴顶。
响应式对齐要用媒体查询切换父容器行为，别重复定义图片样式
不同断点切换对齐方式，核心是覆盖父容器的 text-align 或 justify-content，而不是反复改 <img> 的尺寸：
- 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-container { text-align: left; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { justify-content: flex-end; } }（前提是父容器已是display: flex）
切忌每个断点都写一遍 img { width: 100% } —— 图片尺寸应由 max-width 和 height: auto 统一控制，对齐逻辑交给容器。
真正容易被忽略的是：垂直居中永远依赖父容器的高度上下文。哪怕用了 place-items: center 或 align-items: center，只要父容器高度未定义（比如只靠内容撑开），图片就只会水平居中、垂直贴顶。这不是 bug，是 CSS 布局模型的必然结果。
