最稳方案是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;"> @@##@@ </div>其中
height: 100vh 是关键，max-width: 90vw 防止宽屏下图片过满、留白太小。
text-align: center 只管水平，且只对父容器生效
这个方法轻量、兼容性好，但仅适用于纯水平居中场景，且容易误用：
-
text-align: center必须写在父容器上，不是<img src="photo.jpg" style="max-width:90%">自己 —— 写错位置完全无效 - 父容器若用了
float、display: inline-block或宽度被内容撑窄，会导致居中偏移 - 如果父容器里混了
<div> 这类块级子元素，它们不受 <code>text-align影响，仍靠左适用场景：图文混排段落、卡片内单图、页眉 logo。示例：
html-to-pptx-converter下载使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<div style="text-align: center;"> @@##@@ </div>
margin: 0 auto 要求图片是 block 且宽度可计算
这个组合只解决水平居中，但条件苛刻，任意一条不满足就失败：
- 必须设
display: block（或inline-block），否则margin: 0 auto对行内元素无效 - 图片必须有可计算的宽度：显式
width: 300px，或依赖固有尺寸；width: 100%或max-width: 100%会让auto失效 - 父容器不能是
display: flex或display: grid，否则会接管 margin 行为
典型写法：
@@##@@
注意：它完全不管垂直方向，图片仍贴顶。响应式对齐要用媒体查询切换父容器行为，别重复定义图片样式
不同断点切换对齐方式，核心是覆盖父容器的
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 布局模型的必然结果。
- 必须设
