Overlaying & Centering Two Images, using CSS - css

Question

I am creating a website and need two images to overlay on top of each other, with the top image being centered, however I also need the entire block to be centered in the page so I don't think I can use absolute positioning as I need the page to be scale-able.
I am using -
img.center { display: block; margin-left: auto; margin-right: auto; }
To center images on the page.
Im not sure if I have explained this very well so hopefully the following mock-ups will help.
I have looked around into image overlaying but they all seem to use absolute positioning and I cant seem to make it work so that the images are always centered using that method.
Is there anyway to do this? if some some example code would be extremely helpful, or just a point in the right direction.
Thanks.

Answer 1

<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>

Answer 2

You can use negative offset technique.
<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>

Answer 3

<style type="text/css">
body {
margin: 0px;
}
.height-100vh {
height: 100vh;
}
.center-aligned {
display: box;
display: flex;
box-align: center;
align-items: center;
box-pack: center;
justify-content: center;
}
.background-image {
position: relative;
}
.text {
position: absolute;
}
</style>
<div class="height-100vh center-aligned">
<img class="background-image" src="http://i.imgur.com/1aBfM.png" />
<img src="http://i.imgur.com/DH3Qw.png" class="text">
</div>