求助：如何实现Carousel滚动按钮的垂直居中

问题说明 #

查遍相关问题仍未解决：制作的轮播图滚动按钮无法实现垂直居中。尝试过top: calc(200px/2)或top: 100px均无效，按钮位置固定，与轮播图容器的位置无关，期望按钮始终相对于轮播图垂直居中，无论容器处于页面何处。

问题根源 #

1. 轮播容器.horizontal-scroll未设置position: relative，导致内部绝对定位的按钮以文档（而非轮播容器）为参考定位
2. 卡片容器.card-container使用position: absolute，使得轮播容器失去高度支撑，按钮垂直居中无正确参考

解决方案（仅修改CSS即可） #

.horizontal-scroll {
  overflow-x: hidden;
  position: relative; /* 设置为绝对定位元素的参考容器 */
  min-height: 200px; /* 撑起容器高度，与卡片高度匹配 */
}

.card-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex-basis: 30%;
  position: relative; /* 替换原absolute，避免父容器高度塌陷 */
  gap: 10px;
  left: 0;
  transition: 1s left ease-out;
  overflow-x:hidden
}

/* 按钮样式调整 */
.horizontal-scroll #btn-scroll-left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 基于父容器实现垂直居中 */
}

.horizontal-scroll #btn-scroll-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* 基于父容器实现垂直居中 */
}

/* 其余原有CSS代码保持不变 */

效果说明 #

修改后，滚动按钮会以.horizontal-scroll为参考容器实现垂直居中，无论轮播容器在页面中的位置如何变化，或卡片高度调整，按钮都会始终保持在容器的垂直中间位置。

内容的提问来源于stack exchange，提问作者mits