弹窗图片居中需确保外层容器设position:fixed+100%宽高，内部flex容器启用justify-content和align-items，图片禁用absolute/transform等脱离流样式，并设max-width:90vw和height:auto。
弹窗里的图片居中，不是加个 text-align: center 就完事——它得在弹窗容器内真正“正中间”，且窗口缩放、手机横竖屏切换时都不偏移。核心难点是：弹窗本身常为 position: fixed 或 absolute，而图片又容易因尺寸未约束或脱离文档流导致居中失效。
弹窗容器必须启用 flex 且有明确宽高参照
很多弹窗只写了 display: flex; justify-content: center; align-items: center，但图片不动。原因几乎总是：height 或 width 缺失，或者父容器被 position: absolute 撑塌了高度。
- 弹窗最外层（比如
.modal）需设position: fixed; top: 0; left: 0; width: 100%; height: 100%，确保它撑满视口 - 内部包裹图的容器（如
.modal-content）必须设display: flex; justify-content: center; align-items: center，不能只写在img上 - 若弹窗内容区高度不固定（比如含动态文本），用
min-height: 80vh替代height: 80vh，避免窄屏下内容被裁剪
img 必须保持文档流内 + 尺寸可控
一旦给 img 加 position: absolute，它就跳出 flex 对齐逻辑，align-items 瞬间失效。响应式图片还要防拉伸、防溢出。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 删掉所有
position: absolute、float、transform: translate等会让图片脱离流的样式 -
img自身只需两行关键样式：max-width: 90vw; height: auto——90vw留出边距，避免贴边；height: auto锁定比例 - 如果图片过大导致弹窗滚动条出现，加
overflow: hidden到弹窗内容区，而不是靠裁剪图片
移动端横竖屏切换时图片错位？检查 viewport 和缩放行为
iOS Safari 在横屏切回竖屏时，有时会缓存旧的视口宽度计算，导致 max-width: 90vw 失效，图片撑出弹窗。
立即学习“前端免费学习笔记（深入）”；
- 确保页面
<head>中有正确<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 避免在弹窗上设
transform: scale()或zoom，它们会干扰 vw 单位解析 - 极端情况可监听
window.orientationchange或resize，强制重设img.style.maxWidth = '90vw'，但多数时候只是 viewport 缺失导致
真正难的不是写对那几行 CSS，而是弹窗结构里层层嵌套的定位、flex 与 overflow 的相互覆盖。一个没注意，align-items: center 就被父级 display: grid 覆盖，或者 max-width 被 object-fit: cover 的容器截断——这种隐性冲突，比语法错误更难排查。
