关于css:单行文字垂直居中

html构造：

<div class="pay">
   立刻领取 ￥XXX
</div>

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构造：

<div class="pay">
    <p class="txt">立刻领取 ￥XXX</p>
</div>

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构造：

<div class="pay">
    <p class="txt">立刻领取 ￥XXX</p>
</div>

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%;
}

文字定宽才有成果，否则如果去计算的话，此办法不佳，则不倡议应用