Center Image Over Image Responsive site - html

Question

I am trying to position a small image in the center of a bibber one. Both images are inside a Bootstrap Column.
<div className="row justify-content-center my-5 ">
<div className="col-xs-10 col-sm-6 my-auto mx-auto">
<Fade left duration={1000} delay={1000} fraction={0.1} >
<div className="father">
<img height="110%" width="100%" className="img-fluid biggerImg" src="/img/edificios.jpg" alt="edificios"/>
<img src="/img/logo02.png" alt="logo" className="logo"/>
</div>
</Fade>
</div>
And this is the css.
.padreImagenes{
/* background-image: url("../../assets/img/edificios.jpg"); */
text-align: center;
}
.biggerImg{
position: relative;
opacity: 0.8;
}
.logo{
position: absolute;
/* position: absolute;
transform: translate(-200%, 70%); */
/* position: absolute;
top: 60px;
left: 80px; */
}
As you can see in commented CSS code, I have tried setting the smaller image as absolute, and playing around with top, left, even transform/translate. The problem is that, when the site adapts to user screen size, It does not remain centered.
Combining both images with photoshop is not an option, since I want to apply an effect to the "smaller image".
Thanks,

Answer 1

try:
.logo {
position: absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
div {position:relative; display:inline-block;}
img {display:block;}
.logo {
position: absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
<div>
<img src="https://www.kurzweilai.net/images/Naam-Limits-of-Earth-Part1-001-earth-600x600.jpg" alt="">
<img src="https://blogs.salleurl.edu/sites/default/files/blogs/emprendedores/chrome_hacked_Pwnium-300x300.jpg" alt="" class="logo">
</div>

Answer 2

You can set the images container to display: flex and use the flex attributes to center the elements.
However, I haven't tested it with bootstrap, so there might be some styles conflicts.
.father {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
position: absolute;
}
<div class="row justify-content-center my-5 ">
<div class="col-xs-10 col-sm-6 my-auto mx-auto">
<div class="father">
<img height="110%" width="100%" class="img-fluid biggerImg" src="https://picsum.photos/200/150
" alt="edificios"/>
<img src="https://picsum.photos/100/100
" alt="logo" class="logo"/>
</div>
</div>