用 display: flex + justify-content + align-items 是最稳的，比 text-align: center 或 margin: auto 更可靠，尤其在弹窗尺寸动态变化时；需确保弹窗容器设为 flex，图片加 max-width: 100% 和 height: auto，并注意容器高度、box-sizing 及 IE 兼容性。
弹窗里 <img> 怎么居中又自适应？
直接给结论：用 display: flex + justify-content + align-items 是最稳的，比 text-align: center 或 margin: auto 更可靠，尤其在弹窗尺寸动态变化时。
常见错误是只加 text-align: center 到父容器，但图片是行内元素，默认不占满整行，且在 flex 或绝对定位弹窗里完全失效；还有人用 position: absolute 配 transform: translate(-50%, -50%)，结果图片缩放后偏移错位。
- 确保弹窗容器（比如
.modal-content）设为display: flex，且高度可撑开或设为min-height -
justify-content: center水平居中，align-items: center垂直居中 -
<img>加max-width: 100%和height: auto，防止溢出或拉伸变形 - 如果弹窗用
position: fixed，别忘了给容器加box-sizing: border-box，避免 padding 影响 flex 居中计算
为什么 margin: auto 在弹窗里经常失灵？
因为 margin: auto 要求元素是块级且有明确宽度（或 max-width），而弹窗内容区往往没设固定宽高，<img> 默认是 inline 元素，在非 flex/inline-block 环境下无法触发自动外边距居中。
更麻烦的是：当图片原始尺寸大于弹窗时，margin: auto 不会阻止它溢出，也不会自动缩放——它只是把“超宽部分”往右推，看起来像偏了。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须配合
display: block才能让margin: auto生效 - 仍需手动加
max-width: 100%，否则大图照样破框 - 垂直方向
margin: auto几乎无效，除非父容器有固定高度 +display: table-cell，太重且兼容性差
响应式图片缩放后怎么保持居中不跳动？
窗口缩放或弹窗大小变化时，如果只靠 CSS 居中，图片可能在重绘瞬间闪一下位置。根本原因是浏览器对 max-width 的重新计算和 layout 触发时机不一致。
简单但有效的解法：给图片容器加 overflow: hidden，并用 object-fit: contain 替代纯 max-width 控制缩放行为（注意仅适用于 <img> 或 <video>）。
-
object-fit: contain保证图片完整显示、等比缩放、居中对齐，且不会触发重排 - 需要同时设
width: 100%和height: 100%（父容器得有高度） - 若要兼容 IE，只能退回
max-width: 100%; height: auto+ flex 居中，IE11 对 flex 支持足够好
弹窗用 dialog 元素时要注意什么？
原生 <dialog> 默认没有 padding，且 ::backdrop 会覆盖样式层，容易让人误以为居中代码没生效。
关键点在于：原生 <dialog> 内部内容默认是普通文档流，不是 flex 容器，所以必须显式设置子容器的 flex 行为。
- 不要直接在
<dialog>上写display: flex，它会影响 backdrop 渲染；应该包一层<div class="dialog-body"> -
<dialog>在 Safari 中需加margin: 0 auto才能水平居中自身（浏览器 bug），但这和内部图片居中无关 - 调用
showModal()后，图片加载完成前就渲染，建议监听load事件再做一次offsetHeight强制重绘（极少数情况需要）
