CSS - image over another image , both centered

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?

Possible duplicate of [CSS: center element within a
element](http://stackoverflow.com/questions/6810031/css-center-element-within-a-div-element) — Marcos Pérez Gude, Mar 31 '16 at 11:01
Please, search a little before ask, this question is full of solutions along internet. There are zillions of tons of posts with this same question — Marcos Pérez Gude, Mar 31 '16 at 11:02

score 7 · Answer 1 · answered Mar 31 '16 at 11:02

7

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>

answered Mar 31 '16 at 11:02

Lalji Tadhani

14,041
3
23
40

Mark as duplicate is better. However, is one of the correct answers – Marcos Pérez Gude Mar 31 '16 at 11:02

score 1 · Answer 2 · edited Jan 15 '21 at 13:25

1

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

edited Jan 15 '21 at 13:25

Hasip Timurtas

983
2
11
20

answered Jan 15 '21 at 07:20

Ali

11
1

CSS - image over another image , both centered

2 Answers2