必须设父容器高度，因align-items: center依赖交叉轴有可计算空间；无高度则塌缩致垂直居中失效，需用height: 100vh或min-height: 300px锚定基准。
用 display: flex 配合 justify-content 和 align-items 是最直接、最可靠的响应式图片居中方案，但必须确保父容器有明确高度参照，否则垂直居中会失效。
为什么 flex 容器必须设高度？
因为 align-items: center 依赖容器的交叉轴（垂直方向）有可计算的空间。如果父容器高度塌陷（比如只靠内容撑开），它就只剩“刚好包住图片”的高度，align-items 就没地方可居中了。
-
height: 100vh最常用——让容器占满整个视口高度，缩放时自动适应 -
min-height: 300px更稳妥——避免窄屏下容器过矮，同时保留响应性 - 别在
body上直接写display: flex，否则所有直系子元素（如多个p、div）都会变成 flex item，布局全乱
img 标签自身要加哪些样式？
光靠父容器 flex 不够，图片自己得“听话”：不溢出、不变形、不撑破容器。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须加
max-width: 100%——防止大图在窄屏下横向溢出 - 必须加
height: auto——保持宽高比，避免拉伸或压缩 - 不需要设固定
width或height，否则会破坏响应性 - 不要加
display: block——flex item 默认是块级行为，加了反而多余
旧 Android 浏览器（4.4 及以下）怎么兼容？
这些系统不支持标准 display: flex，但支持带前缀的旧语法，只需补一行即可。
立即学习“前端免费学习笔记（深入）”；
- 父容器加
display: -webkit-flex，再加标准display: flex（后者会覆盖前者） -
justify-content和align-items不需要前缀，它们在旧 WebKit 中已支持 - 如果项目完全不支持 Android 4.4，这行可以省略
真正容易被忽略的是：居中效果是否随窗口缩放实时生效，取决于父容器是否始终有稳定的高度上下文。哪怕用了 flex，只要容器高度靠内容撑开，一缩放就贴顶——这不是代码写错了，而是忘了给容器“锚定”一个响应式高度基准。
