字体垂直居中的几种实现方法

这几天遇到了好多关于字体垂直居中的问题，整理一下，希望对大家也有帮助。

vertical-align：middle

vertical-align 用来指定行内元素（inline）和行内块级元素（inline-block）或表格单元格（table-cell）元素的垂直对齐方式。

inline和inline-block

对于行内元素和行内块级元素，vertical-align对middle的处理方式都是一样的。
baseline——基线

元素基线与父元素的基线对齐。

middle——垂直居中

元素中垂线与父元素的基线加上小写x一半的高度值对齐。

当我们对想要垂直居中的元素设置vertical-align:middle时，往往得不到我们预想的垂直效果。
核心代码：

<style>
.va{vertical-align: middle;}
div{font-size: 36px;
margin: 20px auto;border: 1px dashed #000;text-align: center;}
.inline{display: inline;
font-size: 12px;
border: 1px dashed #000;}
</style>

<div>         
<span class="va inline">inline垂直居中</span>
inline垂直居中
</div>

很明显，这个垂直居中的效果没有我们想象中那么好。
但是如果我们改变策略：
把设置vertical-align: middle;的元素作为标准，周围的文字就会垂直对齐。
更加通俗的讲，就是设置vertical-align: middle;的元素更大一点，周围的文字元素要更小一点，就能实现周围文字的垂直居中。
核心代码

<style>
.va{vertical-align: middle;}
div{font-size: 12px;//更改了大小
margin: 20px auto;border: 1px dashed #000;text-align: center;}
.inline{display: inline;
font-size: 36px;//更改了大小
border: 1px dashed #000;}
</style>

<div>         
<span class="va inline">inline垂直居中</span>
    inline垂直居中
</div>

这才是我们想要的垂直居中的效果。

---

table-cell

baseline——基线 (与sub, super, text-top, text-bottom, <length>, <percentage>等属性具有同样的效果)

与同行单元格的基线对齐。

middle——垂直居中

单元格垂直居中

本文讨论的是文体垂直居中，该属性的情况就不深入讨论了。

---

line-height + height

当line-height等于height时，可以实现字体垂直居中。
具体实现：
目标元素（字体）的line-height大小等于父类元素的height大小，可以实现垂直居中。
核心代码：

<style>
* { margin: 0;padding: 0;}
div{width: 300px;
height: 100px;//父类元素高度
margin: 20px auto;border: 1px dashed #000;text-align: center;}
.lh{font-size:24px;
line-height:100px; //目标垂直字体的行高
}
</style>

<div>         
 <span class="lh">inline垂直居中</span>
</div>

---

行内块级元素垂直居中+vertical-align：top

这种方法比较麻烦，但是适用于更多的场合。
实现过程如下：
1. 更改字体所在的元素为display：inline-block，position：relative;
2. 设置字体的line-height与font-size相等；
3. 设置字体所在元素，top：50%;，vertical-align:top，margin-top为负的font-size大小的一半。

核心代码

<style>
* { margin: 0;padding: 0;}
 div{width: 300px;height: 100px;margin: 20px auto;border: 1px dashed #000;text-align: center;}
.middle{display: inline-block;position:relative;
font-size:24px;line-height:24px;
top:50%;margin-top:-12px;
vertical-align:top; }
</style>

<div>         
<span class="middle">inline垂直居中</span>
</div>

实现的思路：
1. 将字体放置到一个行内块级元素中
2. 将行内块级元素垂直居中

细节说明：

• display：inline-block让span元素变成一个行内块级元素，配合position：relative;top:50%;margin-top:-12px;可以实现块级元素垂直居中。

• font-size与line-height相等是为了保证span元素的高度不被行间距所影响，高度只由font-size控制，方便了margin-top的设置。

• vertical-align:top是为了保证字体是顶格的，让文体看起来更像是垂直居中。

前两条估计大家都懂，我来详细说说最后一条vertical-align:top。

vertical-align:top
把元素的顶端与行中最高元素的顶端对齐。

我们先来看看
vertical-align：baseline | middle | top 这三种的效果。
基线的效果：

中线的效果：

顶线的效果：

我们可以这样想象：
由于我们设置了position：relative;top:50%;margin-top:-12px;，这相当于从上向下排列元素。
如果我们要保证字体也垂直居中，也必须字体在元素内部的从上到下排列（也就是所说的顶格），所以需要设置vertical-align:top。