When I have an h1 element with position "absolute" inside a div with position "relative", setting h1's top:50% and left:50% places it in the middle of the viewport instead of the parent div. It seems that the nearest parent is being ignored for some reason.
HTML:
<div class="container">
<div class="mshobeli">
<div class="shvili black"></div>
<div class="shvili red"></div>
<div class="shvili green"></div>
</div>
<div class="pinkfloyd">
<img src="https://c4.wallpaperflare.com/wallpaper/785/284/983/music-pink-floyd-wallpaper-preview.jpg"
alt="pink floyd logo">
<h2>Pink Floyd</h2>
</div>
Here is the CSS:
.pinkfloyd {
display: inline-block;
position: relative;
}
h2 {
font-size: 30px;
color: orangered;
position: absolute;
top: 50%;
left: 50%;
}