html - 如何让我的按钮保持在图像 slider 下方的中间？

Question

我有两个按钮，无论屏幕有多大，我都想将它们放在 slider 的中间。我该怎么做，现在当我改变屏幕大小时他们只是跳来跳去。当我有最大和最小的尺寸时，它看起来还不错，但当它介于两者之间时……

.buttonright {
  border-radius: 4px;
  background-color: black;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 17px;
  width: 90px;
  transition: all 0.5s;
  cursor: pointer;
}

.buttonleft {
  border-radius: 4px;
  background-color: black;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 17px;
  width: 90px;
  cursor: pointer;
}

.slide {
  margin-left: 300px;
  margin-top: 20px;
  min-width: 500px;
}

@media screen and (max-width:800px) {
  .slide {
    margin-left: 14%;
  }
}

#buttons {
  margin-left: 27%;
  width: 50%;
}

@media screen and (max-width:767px) {
  #buttons {
    margin-left: 18%;
  }
}

<div class="slide">
  <img class="mySlides" src="http://via.placeholder.com/50x50">
  <img class="mySlides" src="http://via.placeholder.com/50x50">
  <img class="mySlides" src="http://via.placeholder.com/50x50">

  <div id="buttons">
    <button class="buttonleft" onclick="plusDivs(-1)">&#10094;</button>
    <button class="buttonright" onclick="plusDivs(1)">&#10095;</button>
  </div>
</div>

Answer 1

这是你想要的吗？

我在主 div(幻灯片)中添加了 text-align:center，因此其中的所有内容都会居中

.buttonright {
  border-radius: 4px;
  background-color: black;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 17px;
  width: 90px;
  transition: all 0.5s;
  cursor: pointer;
}

.buttonleft {
  border-radius: 4px;
  background-color: black;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 17px;
  width: 90px;
  cursor: pointer;
}

.slide {
  margin-top: 20px;
  min-width: 500px;
}

.center{
text-align:center;
}

<div class="slide center">
  <img class="mySlides" src="1.jpg" style="width:70%">
  <img class="mySlides" src="2.jpg" style="width:70%">
  <img class="mySlides" src="3.jpg" style="width:70%">

  <div id="buttons">
    <button class="buttonleft" onclick="plusDivs(-1)">&#10094;</button>
    <button class="buttonright" onclick="plusDivs(1)">&#10095;</button>
  </div>
</div>