Html 移动图像顶部的按钮

我有两个按钮，需要在图片上方移动。一个按钮应位于图像的右侧，另一个按钮应位于左侧。然而，现在他们坚持在图像的左下角，而他们应该是在照片的中间单独的一面。我做错了什么

HTML部分：

<div class="container">
              <img class="mySlides" src="images/dog1.jpg" style="width:100%">
              <img class="mySlides" src="images/dog2.jpg" style="width:100%">
              <img class="mySlides" src="images/dog3.jpg" style="width:100%">
              <img class="mySlides" src="images/dog4.jpg" style="width:100%">

              <button class="carousell-button carousell-button-black carousell-button-left" onclick="plusDivs(-1)">&#10094;</button>
              <button class="carousell-button carousell-button-black carousell-button-right" onclick="plusDivs(1)">&#10095;</button>
        </div>

它现在的样子：

---

请看下面的代码段，并尝试使用flex box

div{ 宽度：200px； 高度：200px； 背景色：黑色； 显示器：flex； 证明内容：中心； 调整项目：灵活启动； } 钮扣{ 宽度：50px； 高度：20px； } btn btn 因为你在中间需要它，然后使用相对父和绝对使用权利。这将确保根据图像大小将其放置在绝对中间位置。 你也应该使用。旋转木马课。 如上述评论中所述，200%px；是无效的属性值。 身体{ 保证金：0； } .集装箱{ 位置：相对位置； } .集装箱.转盘按钮右侧{ 位置：绝对位置； 最高：50%； 右：0； 字体大小：30px； } .集装箱.转盘按钮左侧{ 位置：绝对位置； 最高：50%； 左：0； 字体大小：30px； } &10094; &10095; 你错过了比赛。在选择器中。container.carousell按钮右侧{}200%px无效

.container carousell-button-right {
    position: relative;
    top: 200%px;
    right: 0%;
}
.container carousell-button-left {
    position: absolute;
    top: 100%;
    left: 0%;
}