CSS-图像在另一个图像上，都居中答案

【问题标题】：CSS - image over another image , both centeredCSS-图像在另一个图像上，都居中
【发布时间】：2016-03-31 10:58:55
【问题描述】：

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

但是，当屏幕调整大小时，“播放图像”不居中（像这样：

这是我的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;
}

你知道另一种方法吗？

【问题讨论】：

CSS: center element within a <div> element的可能重复
请在提问之前搜索一下，这个问题在互联网上充满了解决方案。有成千上万的帖子有同样的问题

标签： html css image

【解决方案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>

【讨论】：

标记为重复更好。但是，是正确答案之一

【解决方案2】：

使用绝对和相对定位，使主图相对和其他绝对。然后将其写在悬停的图像类中：

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

【讨论】：