Div的内部具有图像和文本元素，我希望文本绝对在图像的中心居中

Question

I've applied the code in the snippet below. My goal is to position the <p> element with class summoner-level over the image and have it centered horizontally and vertically. Sadly I have no clue how and the code I've found on google doesn't really work for some reason. I assume this is not too hard but I'm not too familiar with absolute positioning.

  *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; list-style-type: none; } html { font-size: 16px; } body { background-color: #f2f2f2; font-family: "Helvetica", sans-serif; height: 100%; width: 100%; line-height: 1.8rem; color: #333333; } .summoner-container { display: flex; flex-direction: column; } .summoner-information { display: flex; margin-bottom: 10px; } .summoner-icon-container { display: flex; position: relative; } .summoner-level { position: absolute; } .summoner-icon { max-width: 75px; } 

  <div class='summoner-container'> <div class='summoner-information'> <div class="summoner-icon-container"> <p class='summoner-level'>150</p> <img class='summoner-icon' v-if='summonerInfo' src="http://ddragon.leagueoflegends.com/cdn/9.13.1/img/profileicon/1250.png" alt=""> </div> </div> </div> 

Answer 1

You can use flex alignment/justification since your container is already set to display: flex

.summoner-icon-container {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

Answer 2

You have come right way!

You just add this!

.summoner-level {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}

will be dynamically center

 *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; list-style-type: none; } html { font-size: 16px; } body { background-color: #f2f2f2; font-family: "Helvetica", sans-serif; height: 100%; width: 100%; line-height: 1.8rem; color: #333333; } .summoner-container { display: flex; flex-direction: column; } .summoner-information { display: flex; margin-bottom: 10px; } .summoner-icon-container { display: flex; position: relative; } .summoner-level { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); } .summoner-icon { max-width: 75px; } 

 <div class='summoner-container'> <div class='summoner-information'> <div class="summoner-icon-container"> <p class='summoner-level'>150</p> <img class='summoner-icon' v-if='summonerInfo' src="http://ddragon.leagueoflegends.com/cdn/9.13.1/img/profileicon/1250.png" alt=""> </div> </div> </div> 

Answer 3

This worked for me.

.summoner-icon-container {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}