最稳方案是display: flex，需设父容器为flex容器并配齐justify-content: center和align-items: center，同时确保图片未脱离文档流、父容器有明确高度，且图片默认inline行为需被合理处理。
用 display: flex 最稳，但得关掉图片默认的 inline 行内行为
图片在 HTML 里默认是 display: inline，会受父容器行高、空白字符影响，直接写 text-align: center 只能水平居中，垂直方向完全没反应。Flex 是目前最可靠的方式，前提是把幻灯片容器设为 flex 容器，并处理好主轴和交叉轴对齐。
- 给幻灯片容器（比如
<div class="slider">）加上 <code>display: flex、justify-content: center（水平）、align-items: center（垂直） - 确保图片本身没有设置
float、position: absolute或其他破坏文档流的样式 - 如果图片被包裹在
<a></a>或<figure></figure>里，要确认这些父元素没继承或重置display值 - 注意：若幻灯片内容是动态切换的（如轮播），每次换图后无需重设样式，flex 居中天然支持重排
- 推荐组合：
width: 100%; height: 100%; object-fit: contain;—— 保持比例、完整显示，留白也居中 - 想填满无留白且不裁剪？不行，
object-fit: cover必然裁剪，fill会拉伸，只有contain或scale-down能保比例 - 如果容器高度不确定（比如响应式全屏幻灯片），建议用
min-height: 100vh而非固定height，避免小屏幕截断 - 给图片加
display: block（干掉 inline 默认行为），再加margin: auto - 同时确保图片父容器有明确宽高（哪怕用
min-width/min-height），否则margin: auto水平有效、垂直无效 - 这个方案在 Chrome/Firefox/Edge 中同样生效，属于跨浏览器兜底写法，不是权宜之计
- 别用
position: absolute + top/left/transform，在轮播切换动画中容易和transition冲突，导致闪动 - 查看开发者工具里图片外层是否意外出现几像素的空白，大概率是 HTML 换行惹的祸
- 解决方法：把所有
<img>写在同一行，或给父容器加font-size: 0（子元素再设正常字号），或用注释消除空白：<img><!-- --><img> - Vue/React 等框架中若用循环生成图片，模板换行也会触发该问题，需用
v-for或map输出紧凑 HTML
object-fit 和 width/height 配合才能真正“视觉居中”
仅靠 flex 居中只能让图片盒子居中，但如果图片尺寸远小于容器，它会原样显示在中间；如果图片太大，又会溢出或拉伸变形。这时候必须配合 object-fit 控制图像填充方式。
IE11 下 flex 居中失效？补个 margin: auto 更保险
IE11 对 align-items: center 在某些嵌套场景下有 bug，尤其是容器有 min-height 但无显式 height 时。此时可退化使用块级元素的自动外边距方案。
轮播组件里图片忽左忽右？检查 white-space 和换行符
很多幻灯片用 <div class="slides">
<img><img>
</div> 结构，如果 HTML 源码里 <img> 标签之间有换行或空格，在 display: inline 或 inline-block 下会被渲染成空白间隙，flex 容器虽能压平，但旧版轮播 JS 可能手动设置了 white-space: nowrap 导致布局错乱。
实际项目里最常踩的坑不在居中逻辑本身，而在图片加载完成前容器高度塌陷、或是 CSS 优先级被第三方轮播库覆盖。建议先用 outline: 1px solid red 框出容器和图片边界，再调样式——眼睛看到的，才真正算数。
