https://i.sstatic.net/5Szut.jpg
Two identical images are displayed correctly with a semi-transparent 'logo' on top of a base green image. However, they are positioned on the left and I need them both to be centered on the screen. I can't seem to figure out what I'm missing here?
<div class="portrait-image-wrapper">
<img src="../image.jpg" class="base-photo"/>
<img src="../logo.png" class="logo"/>
</div>
Here is the CSS code:
html,body {
width: 100%;
height: 100%;}
.portrait-image-wrapper {
position: relative;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
width: 467px;
height: 700px;}
.base-photo {
background-repeat: no-repeat;
position: absolute;
z-index: 1;}
.logo {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;}
I attempted to add these properties to the portrait-image-wrapper class without success...
display: flex;
align-items: center;