垂直水平居中以及底部居中

直接上代码

html

<header class="head-top">
        <p class="head-plan">师徒计划</p>
        <p class="head-line"></p>
</header>

css

.head-top {
    width: 7.5rem;
    height: 0.88rem;
    position: relative;
}

.head-plan {
    position: absolute;
    width: 1.44rem;
    height: 0.36rem;
    font-size: 0.36rem;
    top: 50%;
    left: 50%;
    margin-top: -0.18rem;
    margin-left: -0.72rem;
}

.head-line {
    border-radius: 1rem;
    border: 0.02rem solid red;
    width: 0.44rem;
    height: 0.04rem;
    bottom: 0rem;
    position: absolute;
    left: 50%;
    margin-left: -0.22rem;
}

如图所示