Css 将一个映像放置在引导中的另一个映像上

如何将play.png图像放置在bootsrap中的另一个图像上？水平和垂直居中

我的代码：

echo '<div class="sidebar_youtube_box">';
        echo '<a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'">
            <img src="'.$host.'/images/youtube/'.$vid['sidebar_video_thumb'].'" class="img-responsive">
            <img src="'.$host.'/images/assets/play.png" class="img-responsive play_png">

        </a>';
        echo '</div>';

echo'；
回声'；
回声'；

你可以这样做

.wrapper{
位置：相对位置；
宽度：适合的内容；
高度：适合的内容；
}
.玩{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：50px；
}

---

给出图像

位置：绝对及其父级a
位置：相对。然后，图像将相对于父对象进行定位。使用
顶部
、
左侧
和
变换
完成定位。您还可以使用
z-index
将一个置于另一个之上。请看下面的内容，希望能有所帮助

HTML:

因此，您应该尝试自己编写代码。如果你有问题，你可以发布你尝试过的东西，清楚地解释什么不起作用，并提供一个解决方案。这有什么作用？它如何回答这个（离题）问题？不要只是脱口而出代码。解释你自己！在此基础上，所有列出的图像都将相互关联。我试图弄清楚，但这并没有解决问题。我使用了.img responsive，因为这是css中的内容，但显然，您只想将此规则应用于相关图像。尝试将一个类添加到您想要应用它的图像中，然后更改。img在我的css中响应您选择的任何类。我将编辑我的答案，以便您可以看到。仍然是相同的问题，我会在链接上显示给您。这些图像相互印在一起。对不起现在。。。我真的很困惑。您发送的链接仅显示一个图像。它是一个看起来像几个图像的图像。这让我认为问题在于图像而不是代码。你看不到完整的图像，因为它们在后面。
<div class="sidebar_youtube_box">
    <a href="#" id="'.$vid['sidebar_video_v_id'].'" data-url="'.$vid['sidebar_video_link'].'" class="open_youtube_modal" title="'.$vid['sidebar_video_nev'].'">
    <img src="'.$host.'/images/youtube/'.$vid['sidebar_video_thumb'].'" class="img-responsive img-stack">
    <img src="'.$host.'/images/assets/play.png" class="img-responsive img-stack play_png">  </a>
</div>

.sidebar_youtube_box{
  position:relative;
}
.img-stack{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  z-index:1;
}
.play_png{
  z-index:2;
}