父容器必须设置显式高度（如height: 100vh）且加position: relative（绝对定位时），图片需max-width: 100%和height: auto配合防变形溢出，缺一不可。
直接用 display: flex + justify-content: center + align-items: center 就能稳稳实现，但前提是父容器高度不能塌，且图片自身要加 max-width: 100% 和 height: auto 防溢出变形。
为什么 align-items: center 没效果？
最常见原因是父容器没高度。align-items 是垂直对齐，它需要“可对齐的空间”——如果父容器高度是 auto（比如只包一张图），那它的高度就等于图片原始高度，align-items: center 实际上没空间可居中，结果就是图片贴顶显示。
- 必须显式设高度，比如
height: 100vh（全视口高）、min-height: 400px或height: 100%（但此时父级也得有高度） - 别在
<body>上直接写display: flex，否则所有直系子元素（如多个<p>）都会变成 flex item，布局全乱 - 旧 Android 浏览器（4.4 及以下）需补
display: -webkit-flex
max-width: 100% 和 height: auto 必须一起用
只加 max-width: 100% 不够：图片可能被拉高、压扁；只加 height: auto 也不行：宽屏下会撑爆容器。两者配合才能保持宽高比、不溢出。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
max-width: 100%限制宽度上限，防止窄屏时图片横向滚动 -
height: auto让浏览器按原始比例自动算高度，避免失真 - 不要设
width或height固定值，否则响应式失效
绝对定位方案适合什么场景？
当图片需要脱离文档流（比如做背景图、叠加文字、或嵌入卡片内浮动布局），用 position: relative 包一层 + position: absolute + transform: translate(-50%, -50%) 更可控。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，否则top: 50%会相对于<body>定位，缩放时偏移 - 硬编码
left: 10%或top: 20%是陷阱，窗口一缩就错位 - 必须同时写
top: 50%、left: 50%、transform: translate(-50%, -50%)，三者缺一不可
真正容易被忽略的点是：居中不是图片自己的事，而是它所处容器的尺寸控制和定位上下文共同决定的。哪怕代码只差一行 height 或漏一个 position: relative，整个居中逻辑就会失效，而且错误现象还不明显——图片看起来“差不多居中”，但缩放后立刻露馅。
