如何用CSS滚动吸附实现超宽幻灯片居中对齐？

你的代码中scroll-snap-align: center未生效的核心原因是：当幻灯片宽度大于视口时，滚动容器没有预留足够边距，导致幻灯片无法将中心对齐到视口中心。只需修改以下两处：

修改点1：给滚动容器添加左右内边距 #

给.scroller添加左右内边距，值为幻灯片宽度与视口宽度差值的一半，让第一个和最后一个幻灯片的中心能自然对齐视口中心：

.scroller {
  display: flex;
  width: 100vw;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  /* 新增：预留左右边距，使幻灯片中心对齐视口 */
  padding-left: calc((160vw - 100vw) / 2);
  padding-right: calc((160vw - 100vw) / 2);
  /* 可选：隐藏滚动条优化视觉 */
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar {
  display: none;
}

修改点2：优化幻灯片的flex布局写法（可选） #

你的幻灯片样式已设置flex-shrink: 0和固定宽度，功能不受影响，但可以统一写法让代码更简洁：

.slide {
  scroll-snap-align: center;
  flex-shrink: 0;
  width: 160vw;
  /* flex-shrink:0时，flex-basis与width效果一致，可省略 */
  /* flex-basis: 160vw; */
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

修改后，每个幻灯片的中心会准确吸附到视口中心，文本“Slide”也会始终对齐屏幕中央。

内容的提问来源于stack exchange，提问作者Moriz Büsing