单行文字垂直居中

html结构：

   立即支付 ￥XXX

css代码：

.pay{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    font-size: 17px;
    font-weight: bold;
    color: #080304;
    background: #F7B529;
    border-radius: 6px;
    text-align: center;
}

解释：
line-height与外面的height的高度一致
height: 44px;
line-height: 44px;

html结构：

    
立即支付 ￥XXX

css代码：

.pay{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    font-size: 17px;
    font-weight: bold;
    color: #080304;
    background: #F7B529;
    border-radius: 6px;
    text-align: center;
    display: table;    
 }

.pay .txt{
    display: table-cell;
    vertical-align: middle;
}

解释：
父元素display: table;
子元素
display: table-cell;
vertical-align: middle;

html结构：

    
立即支付 ￥XXX

css代码：

.pay{
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    font-size: 17px;
    font-weight: bold;
    color: #080304;
    background: #F7B529;
    border-radius: 6px;
    text-align: center;
}

.pay .txt{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

文字定宽才有效果，否则如果去计算的话，此方法不佳，则不建议使用