html - 使用 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>

Answer 1

要将 h3 和 paly 按钮放置在图像的中心，您可以使用以下 css:

.imgContainer {
    width: fit-content;
    height: auto;
    position: relative;
}

.imgContainer .botonPlay {
	position: absolute;
    display: flex;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
}

.imgContainer .botonPlay img {
    margin: 0 auto;
    width: 70px;
    height: 65px;
    display: block;
}

.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;
  width: 100%;
}

<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>