轮播容器需设为块级且显式限定宽度（如width: 800px或max-width: 90vw）并配合margin: 0 auto才能水平居中；若父容器为flex/grid或子项未约束宽度（如未设flex: 0 0 100%），则居中失效。
轮播容器本身要设为块级且宽度可控
轮播图水平居中，不是给 <img> 加 margin: 0 auto 就完事——大多数轮播组件用的是 <div> 包裹多张图，真正要居中的其实是这个外层容器（比如 <code>.carousel 或 .slider-container）。如果它没设明确宽度或被 flex/grid 等布局接管，margin: 0 auto 就会失效。
常见错误：直接在 或全宽 <section></section> 里放轮播，却不给轮播容器加宽度限制，结果它默认撑满父容器，左右 margin 没空间可分。
- 必须显式设置轮播容器宽度，例如
width: 800px或max-width: 90vw - 同时加
margin: 0 auto，且确保它 display 是 block（默认就是） - 避免父容器是
display: flex或display: grid，否则会覆盖margin: auto行为 - 若用响应式设计，
width: 100%+max-width: 800px是更稳妥的组合
子项不能靠自身宽度撑开容器
轮播内部每个 .carousel-item 如果设了 width: fit-content、flex: none 或未约束宽度，就可能把整个轮播容器拉宽，导致 margin: 0 auto 失效——因为容器实际宽度 > 设定宽度，浏览器无法居中“溢出”的部分。
典型现象：轮播看起来左偏，右边留白巨大，滚动时边缘透出空白或相邻图。
-
.carousel-item应统一设为flex: 0 0 100%（配合外层display: flex），或width: 100%+flex-shrink: 0 - 禁止对
.carousel-item使用width: fit-content或inline-block布局 - 如果用了
scroll-snap-type，更要确保每个 item 宽度严格等于容器宽度，否则 snap 对齐错位也会破坏视觉居中
图片居中和容器居中是两件事
很多人混淆「轮播组件整体居中」和「单张图在 slide 内居中」。前者靠外层容器 margin: 0 auto，后者靠 display: flex + justify-content: center + align-items: center 作用于 .carousel-item。
如果只做了后者，轮播组件本身仍贴左；如果只做前者但 .carousel-item 内部图片没居中，竖图会偏上、横图会留白。
-
.carousel-item必须设display: flex; justify-content: center; align-items: center; -
.carousel-item img要配max-width: 100%; max-height: 100%; object-fit: contain;，不然图片尺寸不一会导致 item 高度塌陷或溢出 - 别在
img上写margin: 0 auto—— 它是行内元素，且 flex 容器里该属性无效
移动端和旧浏览器的兼容性陷阱
在 iOS Safari 或 Android 4.4 以下设备上，scroll-behavior: smooth 和部分 flex 行为可能异常，间接影响居中效果：比如滚动后容器高度抖动、align-items: center 不生效，最终让图片看起来“没居中”。
这不是代码写错了，而是渲染时机问题——图片加载延迟、字体加载、viewport 缩放都可能导致初始布局计算偏差。
- 给
.carousel设min-height（如min-height: 400px），而非仅height，防止图片未加载时容器塌陷 - 避免用
vh单位设高度（iOS Safari 中 viewport height 会随地址栏显示/隐藏变化） - 旧 Android 需加
display: -webkit-flex和-webkit-justify-content/-webkit-align-items
