让文本垂直居中的几个方法

一、使用line-height（适用于知道高度，一行文字）
让line-height和height一样高，可使文本垂直居中。
二、设置上下padding
三、通过table

   .testdiv {
        height: 87px;
        display: table;
    }
    
    .innerdiv {
        width: 20px;
        height: 100%;
        line-height: 20px;
        padding: 0 4px;
        border-right: 1px solid #F4F8FB;
        font-size: 14px;
        text-align: center;
        background: #F4F8FB;
        display: table-cell;
        vertical-align: middle;
    }
    <div class="testdiv">
        <div class="innerdiv">服装</div>
    </div>

三、使用 vertical-align和空标签（可用于高度未知）

   .testdiv {
        height: 87px;
    }
    
    h4 {
        width: 20px;
        height: 100%;
        float: left;
        line-height: 20px;
        padding: 0 4px;
        border-right: 1px solid #F4F8FB;
        font-size: 14px;
        text-align: center;
        background: #F4F8FB;
    }
    
    h4 a {
        display: inline-block;
        vertical-align: middle;
        color: #1A397C;
    }
    
    h4 i {
        height: 100%;
        width: 0;
        display: inline-block;
        vertical-align: middle;
        color: #1A397C;
    }
    <div class="testdiv">
        <h4><a href="">服装</a><i></i></h4>
    </div>
    

四、absolute+margin-top方法（需知道内部div高度）

   .testdiv {
        height: 87px;
        position: relative;
        background: #F4F8FB;
    }
    
    .innerdiv {
        width: 20px;
        height: 40px;
        line-height: 20px;
        padding: 0 4px;
        border: 1px solid #000;
        font-size: 14px;
        text-align: center;
        position: absolute;
        top: 50%;
        margin-top: -21px;
    }
    <div class="testdiv">
        <div class="innerdiv">居中</div>
    </div>

五、absolute+transform方法（可适用于内部div高度未定的情况，因为translate属性值为百分比时是相对元素自身的content+padding+border来计算的）

.testdiv {
    height: 87px;
    position: relative;
    background: #F4F8FB;
 }

.innerdiv {
    width: 20px;
    line-height: 20px;
    padding: 0 4px;
    border: 1px solid #000;
    font-size: 14px;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
<div class="testdiv">
    <div class="innerdiv">居中</div>
</div>

六、使用flex布局

.testdiv {
    height: 87px;
    background: #F4F8FB;
    justify-content: center; /*子元素水平居中*/
    align-items: center; /*子元素垂直居中*/
    display: -webkit-flex;
}

.innerdiv {
    width: 20px;
    line-height: 20px;
    padding: 4px;
    border: 1px solid #000;
    font-size: 14px;
    text-align: center;
}
<div class="testdiv">
    <div class="innerdiv">居中</div>
</div>

七、aboslute（原理：‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = 包含块的高度。
在其他值不是auto的时候，margin-top和margin-bottom是可以根据上式算出的。同理margin-left和margin-right也是）

.testdiv {
    height: 87px;
    background: #F4F8FB;
    position: relative;
}    
.innerdiv {
    width: 20px;/*宽度需固定*/
    line-height: 20px;
    padding: 4px;
    border: 1px solid #000;
    font-size: 14px;
    text-align: center;
    height: 40px;/*高度需固定*/
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
<div class="testdiv">
    <div class="innerdiv">居中</div>
</div>

来源：https://www.cnblogs.com/baimeishaoxia/p/12589954.html