直接用 display: flex + justify-content: center + align-items: center 能实现居中，但必须配合 min-height: 100vh、max-width/max-height 及 width: auto/height: auto，否则小屏下易溢出、拉伸或截断；margin: 0 auto 仅水平居中且不处理垂直方向，依赖父容器明确宽度，在响应式场景下不可靠。
直接用 display: flex + justify-content: center + align-items: center 就能实现居中，但只写这三行大概率会出问题——图片溢出、拉伸、截断或在小屏消失，根本原因是没约束容器高度和图片自身缩放行为。
为什么 margin: 0 auto 在响应式场景下经常失效
它只处理水平居中，且依赖父容器有明确宽度；一旦图片宽高比失衡、父容器没设 max-width 或用了 width: 100%，图片就会撑破布局。更关键的是：它完全不处理垂直居中——移动端视口高度频繁变化时，margin: 0 auto 根本无法保证图片始终在屏幕中央。
- 常见错误现象：
img { display: block; margin: 0 auto; }在 iPhone 竖屏下图片顶部被截断，或横屏时底部留大片空白 - 根本原因：容器缺少
min-height: 100vh，图片也缺max-width/max-height和width: auto; height: auto; -
min-height: 100vh比height: 100vh更安全：前者确保至少占满一屏，同时允许内容自然撑高；后者会强制裁剪，导致滚动条触发后图片错位
display: flex 居中必须配对控制尺寸才可靠
仅开启 flex 并设置对齐，不等于图片就“安全居中”。浏览器仍按原始尺寸渲染，尤其遇到大图或窄屏时极易溢出。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 容器必须设
min-height: 100vh（不能直接写在body上，应封装专用容器如<div class="hero-img">） - 图片必须同时声明：
max-width: 90vw、max-height: 80vh、width: auto、height: auto - 错误示范：
#my-img { width: 100%; height: auto; }→ 强制拉宽，破坏宽高比 - 性能提示：避免内联样式重复写，建议抽为类名统一管理，如
.responsive-img
align-items: center 的作用范围容易被误读
它只对弹性容器的**直接子元素**生效，且默认沿交叉轴（垂直方向）居中。如果容器里除了图片还有文字、按钮等其他元素，它们会一起被垂直居中——这不是 bug，是设计行为。
立即学习“前端免费学习笔记（深入）”；
- 若只需图片居中、其余内容按文档流排列，不要把文字塞进同一个 flex 容器；应拆分为独立结构，或用
margin/position单独控制 -
object-fit: contain对普通<img>无效，它是为background-image或<video>设计的，加了也没用 - 兼容性不用纠结：Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+ 全支持，现代项目无需为 IE11 妥协
真正难的不是写出那三行 flex 代码，而是想清楚：这个居中是“整屏视觉居中”还是“容器内居中”，图片是否要保留原始比例，以及旁边有没有其他元素需要协同排布——这些判断决定了你该加哪几行限制，而不是盲目套模板。
