如何将Prev/Next按钮显示在图片左右两侧的中间位置？

我来帮你搞定这个按钮定位的问题！要把Prev/Next按钮放在图片左右两侧的垂直中间，核心是用相对+绝对定位的组合，结合你现有的代码调整就行，方案如下：

核心思路 #

先给包裹图片和按钮的父容器设置position: relative，作为按钮绝对定位的基准；再给按钮添加绝对定位属性，通过top:50% + transform实现垂直居中，最后分别定位到左右两侧。

修改后的完整代码 #

CSS部分

/* 父容器：作为按钮定位的基准 */
.slider-container {
  width: 100%;
  position: relative;
  /* 可选：给容器加左右内边距，避免按钮贴紧屏幕边缘 */
  padding: 0 40px;
  box-sizing: border-box;
}

/* 基于你原有按钮样式，添加定位属性 */
.slide {
  position: absolute;
  top: 50%;
  /* 垂直居中：向上偏移自身高度的一半，适配任意按钮高度 */
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 20px;
  padding: 7px 4px;
  margin: 0; /* 去掉原有margin，避免定位偏移 */
  cursor: pointer;
  height: 32px;
  width: 32px;
  background-color: #2874f0;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  /* 确保按钮在图片上方，不会被遮挡 */
  z-index: 10;
}

/* 上一页按钮：定位到左侧 */
.slide.prev {
  left: 10px;
}

/* 下一页按钮：定位到右侧 */
.slide.next {
  right: 10px;
}

/* 你的原有图片样式保持不变 */
.image {
  height: auto;
  width: auto;
  max-height: 350px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

HTML结构

<div class="slider-container">
  <div class="slide prev">←</div>
  <img src="你的图片URL" class="image" alt="轮播图片">
  <div class="slide next">→</div>
</div>

关键细节说明 #

• .slider-container的position: relative是核心：没有它的话，按钮的绝对定位会以整个页面为基准，而不是图片容器。
• transform: translateY(-50%)：相比用固定margin-top居中，这种写法更灵活，不管按钮高度怎么变，都能精准垂直居中。
• z-index: 10：避免按钮被图片或其他页面元素遮挡，确保点击区域可用。

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