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

Question

I have two images, one on another. like this:

But, when the screen resize, the "play image" is not centered (like this:

This is my 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>

And this is my css:

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

You know another way to do it?

Answer 1

Add this property

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

Answer 2

use absolute and relative positioning, make the main image relative and other absolute. then write this in hovered image clas :

left: 50%;
top: 50%;
transform: translate(-50%, -50%)