另一个堆叠居中的图像问题

Question

我有一个电视机的图像，我想在其中放置“节目”的图像，在屏幕上水平居中（在电视屏幕图像的前面）。我正在使用 a 来设置放置图像的区域的尺寸，但如果没有必要，我不必这样做。我已经摆弄了位置：和图像的绝对/相对，但我不能让两个图像都居中和堆叠 - 要么它们在居中时部分重叠，要么它们在“”的边缘完美对齐。这是代码的当前迭代。任何建议将不胜感激。

<div id="sourceDiv" align="center">
    <img class="test" src="uvaCover.jpg" style="z-index:2; width:800px">
    <img class="test" src = "tvScreen.jpg" style="z-index:1; width:900px">
</div>

.test {
    position: absolute;
    display: block;
    margin:auto;
    height:auto;
    overflow: hidden;
  }

#sourceDiv {
  position:relative;
  background-color: red;
  top:170px;
  left: 20px;
  width:1000px;
  height: 800px;
  margin:auto;
}

Answer 1

我找到了答案。对于“：

  display: flex;
  align-items: center;
  justify-content: center;