css transform translate doesn't work on y axis - html

Question

I want to centralize a div block on both x-axis and y-axis. But I can't move the block by using translate.
.maincontain {
position: relative;
min-height: 100%;
width: 100%;
float: left;
}
.bannerimage {
position: absolute;
width: 64%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-size: 100% 100%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>

Answer 1

You may consider using flex or grid to avoid playing around with position, min-height can also use vh units (viewport height) instead % that requires to inherit an height value from the parent to calculate it.
examples:
body {
margin: 0;
}
.maincontain {
display: grid;
min-height: 100vh;
}
.bannerimage {
margin: auto;
width: 64%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>
body {
margin: 0;
}
.maincontain {
display: flex;
min-height: 100vh;
}
.bannerimage {
margin: auto;
width: 64%;
border-radius: 5px;
background-color: violet;
}
<div class="maincontain">
<div class="bannerimage" id="image_gallery">
<img src="./img/2.jpg" alt="2">
<img src="./img/3.jpg" alt="3">
<img src="./img/4.jpg" alt="4">
</div>
</div>