html - Div 里面有图像和文本元素，我希望文本绝对居中在图像的中心

Question

我已经在下面的代码片段中应用了代码。我的目标是定位 <p>在图像上具有 class summoner-level 的元素，并将其水平和垂直居中。可悲的是，我不知道如何以及我在谷歌上找到的代码由于某种原因并没有真正起作用。我认为这并不太难，但我对绝对定位不太熟悉。

    *, *: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

您可以使用 flex 对齐/对齐，因为您的容器已经设置为 display: flex

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