Center text while on position absolute

Question

I am working on a team roster page. I was inspired by https://www.fcbarcelona.com/en/football/first-team/players and tried to replicate it as much as possible,for some practise.The problem i have ran into,is that to make their lastname visible in the background,i am using position:absolute and paddign-top to place it where i want to,but i can't seem to manage,to find a proper way to place the lastname in the exact center of the div

 const player = Array.from(document.getElementsByClassName('player')); const lastname_background = Array.from(document.getElementsByClassName('lastname-background')); const info = Array.from(document.getElementsByClassName('info')); const hidden_stats = Array.from(document.getElementsByClassName('hidden-stats')); player.forEach(i=>i.addEventListener('mouseover',()=>{ const index = player.indexOf(i) lastname_background[index].style.paddingTop = "25vh"; info[index].style.paddingTop = "31vh"; lastname_background[index].style.transition = "0.4s"; info[index].style.transition = "0.4s"; hidden_stats[index].style.visibility = "visible"; hidden_stats[index].style.transition = "1s"; })) player.forEach(i=>i.addEventListener('mouseout',()=>{ const index = player.indexOf(i) lastname_background[index].style.paddingTop = "33vh"; info[index].style.paddingTop = "40vh"; lastname_background[index].style.transition = "0.4s"; info[index].style.transition = "0.4s"; hidden_stats[index].style.visibility = "hidden"; }))

 .page-title { font-size: 2.7vw; color: white; text-align: center; padding-top: 50px; padding-bottom: 50px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; -webkit-box-shadow: inset 0px -50px 25px -10px #1A2434; box-shadow: inset 0px -50px 25px -10px #1A2434; } .outside-container { display: flex; justify-content: center; } .container { background-color: white; border-radius: 10px; width: 90% } .players { display: flex; justify-content: space-around; } h3{ height: 100px; display: flex; justify-content: center; align-items: center; font-size: x-large; color: #d14f51; } .player{ height: 50vh; width: 25%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; -webkit-box-shadow: inset 0px -150px 120px -15px #1A2434; box-shadow: inset 0px -150px 120px -15px #1A2434; } .player:hover{ cursor: pointer; } .info { padding-top: 40vh; text-align: center; color: white; z-index: 9; } .inline1 { display: inline-block; vertical-align: middle; padding: 5px; font-size: 1.7vw; } .hidden-stats{ display: flex; justify-content: center; visibility: hidden; margin-top: 2vh; } .inline2{ width: 7vw; border-top: 1px solid rgba(255, 255, 255, 0.308); display: inline-block; vertical-align: middle; padding: 1vh; } .stat-title{ font-size: 0.5vw; padding-bottom: 0.5vh; } .position{ font-size: 0.8vw; } .lastname-background { position: absolute; padding-top: 33vh; font-size: 5vw; } .lastname-background p { font-style: italic; color: white; opacity: 0.15; letter-spacing: 2px; }

 <main> <h4 class="page-title">First team</h4> <div class="outside-container"> <div class="container"> <h3>Keepers</h3> <div class="players goalkeepers"> <div class="player" style="background-image: url('<%= player.image %>');"> <div class="lastname-background"> <p>player lastname</p> </div> <div class="info" id="info" > <div class="inline1" id="number">player.number</div> <div class="inline1" id="firstname">player.firstname</div> <div class="inline1" id="lastname">player.lastname</div> <div class="position">player.position</div> <div class="hidden-stats"> <div class="inline2"> <div class="stat-title">Birthday</div> <div>player birthday</div> </div> <div class="inline2"> <div class="stat-title">Appearances</div> <div>player appearances</div> </div> <div class="inline2"> <div class="stat-title">Γκολ</div> <div>player goals</div> </div> </div> </div> </div> </div> <h3>Defenders</h3> <div class="players defenders"> </div> <h3>Midfielders</h3> <div class="players midfielders"> </div> <h3>Forwards</h3> <div class="players forwards"> </div> </div> </div> </div> </main>

Answer 1

Add position: relative; to .player to make it the reference for the absolutely positioned child element.