如何将两个图像叠加在一起并做出响应？

Question

我是一个完全的新手，所以请对我好一点！ 我正在尝试将图像堆叠到彼此之上，一个图像居中，另一个图像居中。我也希望这能有所作为。这是我到达HTML的距离：

<div class="img-wrap">
  <img class="nijntje" src="Images/Nijnrond.png">
  <img class="nijntje-bg" src="Images/yellow_shape.png">
</div>

CSS：

.img-wrap{
  position: relative;
  height: 500px;
}

.nijntje {
  width: 500px;
  position: absolute;
}

.nijntje-bg {
  position: absolute;
  width: 420px;
  z-index: -1;
}

在img-wrap中增加了高度，以向下推文本。不知道这是否是最优雅的解决方案。但是真正的问题是：我的图像还没有居中，我也想不出如何使它们居中（而bg图像则稍微偏离了中心）。希望您的帮助，谢谢！