使用CSS在图像上对div进行绝对居中

Question

我有一个图像，并希望在该图像的中心使用字体真棒圆圈图标。我可以这样做吗？

<div class="poster">
  <img src="img/6.jpg">
  <div id="font">
    <i class="far fa-play-circle fa-5x"></i>
  </div>
</div>

我想在图像中间做这个播放字体图标，那我该怎么办？我也尝试过css

.poster{
  margin-left: 100px;
  margin-top: -250px;
  border-width: 12px solid red;
}

.far{
  margin-right: 
  color: white;
  transition:transform 2s;
}

Answer 1

您可以使用flexbox将div中的所有内容居中。然后将position: absolute应用于您的图标，将其放在图像的顶部。

.poster {
  /*margin-left: 100px;
  margin-top: -250px;*/
  border: 12px solid red;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  display: block;
  max-width: 100%;
}

.poster #font {
  position: absolute;
}

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="poster">
  <img src="https://unsplash.it/200">
  <span id="font">
    <i class="far fa-play-circle fa-5x"></i>
  </span>
</div>