叠层及；使用CSS将两个图像居中

我正在创建一个网站，需要两个图像相互叠加，顶部图像居中，但是我也需要整个块在页面中居中，因此我认为我不能使用绝对定位，因为我需要页面能够缩放

我正在使用-

img.center {   display: block;   margin-left: auto;   margin-right: auto; }

以使图像在页面上居中

我不确定我是否解释得很好，所以希望下面的模型会有所帮助

我环顾了一下图像叠加，但它们似乎都使用了绝对定位，我似乎无法使其工作，以便图像始终使用该方法居中

有什么办法可以这样做吗？如果一些示例代码非常有用，或者只是正确方向上的一点

谢谢。

<div class="img_cont">
    <img src="1.png" alt="" class="first"/>
    <img src="2.png" alt="" class="second"/>
</div>
<style type="text/css">
    div {
        width: 300px;
        height: 300px;
        position: relative;
            margin: 0 auto;
    }

    .first {
        width: 100%;
        height: 100%;
    }

    .second {
        position: absolute;
    }
</style>
<script type="text/javascript">
    $(".home_click").css("left", ($(".img_cont").width() - $(".second").width()) / 2 + "px");
    $(".home_click").css("top", ($(".img_cont").height() - $(".second").height()) / 2 + "px");
</script>

div{
宽度：300px；
高度：300px；
位置：相对位置；
保证金：0自动；
}
.首先{
宽度：100%；
身高：100%；
}
.第二{
位置：绝对位置；
}
$（“.home\u click”）.css（$（“.img\u cont”）.width（）-$（.second”）.width（））/2+“px”）；
$（“.home\u click”）.css（$（.img\u cont”）.height（）-$（.second”）.height（）/2+“px”）；

您可以使用

.第一，.第二{
边距：0-200px；/*其中400px为宽度偏移量（为/2）*/
位置：绝对；顶部：0；左侧：50%；
}
.第二{
边距：0-100px；/*让我们猜测第二幅图像的宽度是200px*/
}

身体{
边际：0px；
}
.高度-100vh{
高度：100vh；
}
.中心对齐{
显示：框；
显示器：flex；
框对齐：居中；
对齐项目：居中；
盒式包装：中间；
证明内容：中心；
}
.背景图像{
位置：相对位置；
}
.文本{
位置：绝对位置；
}

<div class="img_cont">
    <img src="1.png" alt="" class="first"/>
    <img src="2.png" alt="" class="second"/>
</div>
<style>
.first, .second{
    margin:0 0 0 -200px; /* where 400px is width offset is / 2) */
    position:absolute;top:0;left:50%;
}
.second{
    margin:0 0 0 -100px; /* let's guess second image was 200px wide */
}
</style>