使用CSS将绝对容器放在另一个容器内

Question

实际上我有这个（此屏幕截图来自其他不需要我将图像居中的html）

“>

而且我需要这样的东西

<<

但是我无法将播放按钮和h3文本定位在图像的内部……希望您能为我提供帮助

.imgContainer {
  width: 100%;
  height: auto;
}

.imgContainer .botonPlay {
  position: absolute;
  display: block;
}

.imgContainer .botonPlay img {
  margin-left: 10px;
  width: 70px;
  height: 65px;
}

.imgContainer h3 {
  position: relative;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 50px;
  color: #FFFFFF;
  text-shadow: 3px 1px 0px #000000;
  top: 0px;
  padding-left: 10px;
}

.imgContainer #imagenPeli {
  display: block;
  margin: auto;
}

    <div class="imgContainer">
    <div class="botonPlay">
        <a href="ver.html">
            <h3>JOKER</h3>
            <img src="https://puu.sh/EwYad/148efdef71.png" alt="">
        </a>
    </div>
    <img id="imagenPeli" src="https://puu.sh/EwFra/20b0f2b018.png" class="img-fluid" alt="...">
</div>

实际上，我有这个（此屏幕快照来自其他html，我不需要将图像居中）而且我需要类似的内容，但是我无法将播放按钮和h3文本定位在图像内... .. 。

Answer 1

要将h3和paly按钮放置在图像的中央，可以使用以下CSS：