CSS - 另一个图像上的图像，均居中

Question

我有两张图片，一张一张。像这样：

但是，当屏幕调整大小时，“播放图像”不会居中（如下所示：

这是我的 html：

<div class="flapImage" id="idHot">                        
     <img src="images/hot.png" style="position:relative; top:0; left:0; max-width:390px;" width="100%" height="190px" />
     <img src="images/watchVideoP.png" width="200px" style="position:absolute; top:120px; left:80px;" />
</div>

这是我的 css：

.flapImage{
   margin:0 auto;
   text-align:center;
   top:0;
   left:0;
   background-color:black;
}

你知道另一种方法吗？

Answer 1

添加此属性

<div class="flapImage" id="idHot">                        
     <img src="images/hot.png" style="position:relative; top:0; left:0; max-width:390px;" width="100%" height="190px" />
     <img src="images/watchVideoP.png" width="200px" style="position:absolute; top:50%; left: 50%; transform: translate(-50%, -50%);" />
</div>