CSS按钮对齐求助：如何将按钮置于蓝色盒子两侧并垂直居中

我是CSS初学者，制作网页时遇到按钮布局混乱的问题。需要把.btn-prev和.btn-next两个圆形按钮放在对应HTML中center_part区域的蓝色盒子左右两侧，保持垂直居中，且不能使用flex布局避免破坏原有定位。

当前代码 #

CSS代码：

.btn-prev, .btn-next {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    display: inline-block;
    border: none;
    line-height: 40px;
    margin: 0 auto;
    top: 30%;
    z-index: 2;
    font-size: 30px;
    font-weight: bold;
    border-radius: 50%;
    font-family: monospace;
    cursor: pointer;
  }
  
  .btn-prev:hover, .btn-next:hover {
    background: rgb(238, 236, 236);
  }
  
  .btn-prev {
    left: 10% auto;
    right: 80%;
    margin: 0 auto;
    text-align: center;
    border: none;
    
  }
  
  .btn-next {
    right: 10% auto;
    left: 80%;
    margin: 0 auto;
    text-align: center;
    border: none;
  }

HTML代码：

<section>
    <div id="btn-prev" class="btn-prev">&#60;</div>
    <div id="btn-next" class="btn-next">&#62;</div>
    <div class="center_part">
      <div class="zoom">
   </div><br><br>
    <button class="button btnleer">Leer</button>
  </div>
  </section>

效果说明 #

• 实际效果：两个按钮布局混乱，未对齐到蓝色盒子两侧，位置不符合预期
• 期望效果：两个圆形按钮分别位于蓝色盒子的左右边缘，与盒子保持垂直居中对齐

调整方案（不使用flex布局） #

1. 给父容器设置相对定位：按钮的绝对定位需要参考父元素，给<section>添加相对定位：

section {
  position: relative;
}

2. 修改按钮基础样式：移除无效的定位属性，改用绝对定位实现垂直居中：

.btn-prev, .btn-next {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.7);
  position: absolute; /* 改为绝对定位 */
  border: none;
  line-height: 40px;
  top: 50%; /* 顶部对齐父元素垂直中点 */
  margin-top: -20px; /* 向上偏移自身高度的一半，实现精确垂直居中 */
  z-index: 2;
  font-size: 30px;
  font-weight: bold;
  border-radius: 50%;
  font-family: monospace;
  cursor: pointer;
  text-align: center; /* 统一移到基础样式，避免重复 */
}

3. 设置按钮水平位置：根据蓝色盒子的居中位置，调整左右按钮的水平偏移（假设蓝色盒子宽度为600px，可根据实际情况修改数值）：

.btn-prev {
  /* 计算左侧位置：父容器中点 - 盒子半宽 - 按钮半宽，刚好贴住盒子左边缘 */
  left: calc(50% - 300px - 20px);
}

.btn-next {
  /* 右侧同理 */
  right: calc(50% - 300px - 20px);
}

如果不知道蓝色盒子的具体宽度，也可以直接设置固定的left/right值（比如left: 20px），或者根据center_part的外边距调整，确保按钮对齐盒子边缘即可。

内容的提问来源于stack exchange，提问作者An Begginer Developer