css文字垂直居中最简单的方法

css文字垂直居中最简单的方法如下，先看两个例子：

例子1：

.dog a {
    display: block;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    background: #F04848;
    border-radius: 4px;
    margin: 5px auto;
    font-size: 14px;
}

<div class="dog"> <a rel="nofollow" href="/" target="_blank">直达链接 »</a></div>

效果如下：

例子2

.dog a {
    display: block;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    background: #F04848;
    border-radius: 4px;
    margin: 5px auto;
    font-size: 14px;
}

<div class="dog"> <a rel="nofollow" href="/" target="_blank">直达链接 »</a></div>

效果如下：

上面的两个例子其实代码都是一样的，但第一个不能垂直居中，第二个却可以垂直剧中，为什么会这样，其实仔细对比有一个微小的差别，第一个line-height: 30px;，第二个line-height: 50px;，而两者height都为50px，所以就有答案了。

即css文字中实现垂直居中的最简单方法就是使height数值=line-height数值即可，而传统的vertical-align:middle只能适用于display: table-cell的前提下以及在table表格中，并不能适用于很多其他中情况，在vertical-align:middle无解的情况下不妨可以试试上述方法，超简单！