Html 重叠2个图像而不丢失中心

我需要使用以下CSS重叠两个图像：

display: block;
margin: auto;

目前的情况是：

我希望较大的图像（现在位于底部的图像）位于较小的图像和文本下方，而不丢失已经居中的位置。我试过使用

z-index

，并将位置设置为

relative

和

absolute

，但这只会弄乱图像的对齐

HTML:

<img id="logo" src="Pics/logo1.png" class="animated bounceInUp">  
<img id="wall" src="Pics/Ywall1.png">

我也尝试了这个答案，但再次遇到了对齐问题。调整

顶部

和

左侧

值不仅是一个大麻烦，而且也不能提供完美的对中

这个：

---

另外，Stackoverflow不会让我嵌入图像和嵌入2个链接，直到我得到10个代表。对此表示抱歉。

可以将较大的图像作为背景吗

#墙{
身高：413px；
宽度：620px；
显示：块；
保证金：自动；
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景图像：url（'http://cdn2.spectator.co.uk/files/2016/07/wall.jpg');
文本对齐：居中；
}

标志文字！

那位先生是一个聪明的解决办法。除了背景图片：url（../Pics/Ywall1.png）之外，它的工作方式很有魅力；不加载我的背景图像。我的HTML、CSS和图像都存储在同一文件夹中的不同目录中；但这仍然留下了文字悬而未决。。。我还需要正好在我的标志下面的文字，当然居中。编辑的答案来修复标志文字。背景图像的相对路径应该不会太难。最坏的情况是，现在给它一个绝对路径，以后再修复。这不起作用。请注意，我的文本不是任何常规文本。我正在使用typed.js插件来显示此文本。实际文本放置在div中。显示的文本位于

span

中。我试着把一个div中的跨距放到有背景的div中，但是没有用。它将徽标向左移动，文本在同一高度和背景图像的右侧出现。

#logo
{
    height: 200px;
    width: 200px;
    display: block;
    margin: auto;
    padding-top: 15%;
}

#wall
{
    height: 500px;
    display: block;
    margin: auto;
}