前言：垂直居中是布局里常常会遇到的需求，其中文本垂直居中因为文本高度的不确定性更需要技巧一些。抛开目前讨论度很高的flex和Grid布局不谈（其实是不会），稍微总结一下几种常见的文本垂直居中方式。
1. 单行文本固定高度垂直居中
这是最简单的一种情况，固定为单行的情况下，使用类似line-height: 30px这种方式，利用行高将整个元素的高度撑起来，这样文本也同时会居中。这也是我最开始一直用的一种居中方式，在那个懵懂无知的年纪（误，留下了一堆垃圾代码。
这种方法在文本固定的情况下没有任何问题，比如说用来做导航条，但是当整个系统适配多语言之后，由于不同语言描述相同文本的长度有区别，整个导航条可能就不那么美观了，请看如下的例子：
HTML：
<div>
产品与服务
</div>
<div>
新闻稿中心
</div>
<div>
知识库
</div>
CSS:
div{
width: 130px;
background-color: #efefef;
line-height: 40px;
font-size: 16px;
text-align: center;
float: left;
position: relative;
}
div::after{
content: '';
width: 2px;
height: 100%;
background-color: #fff;
position: absolute;
right: 0;
top: 0;
}
页面显示效果如下：
看起来很美，但是进行多语言适配后，英文显示如下：
所以使用line-height直接控制文本垂直居中需要满足：
- 文本长度固定，比如都是四字短语，或者最长的文本也不会折行。
- 不进行多语言适配，这样文本长度不会发生变化。
2. 多行文本不固定高度垂直居中
这种情况解决方法也很简单，就是设置相同的padding-top和padding-bottom，这样无论是否折行文本都会垂直居中。
这种方法同样有局限性，不适合整体高度固定的情况，例如导航条。
3. 多行文本固定高度垂直居中
多行文本固定高度垂直居中的方法利用了inline-block元素具有vertical-align属性的特点，将需要垂直居中的元素均加上
display: inline-block;
vertical-align: center;
例如导航条，将1中的例子修改成如下：
HTML：
<div>
product & service
</div><!--
--><div>
News Releases
</div><!--
--><div>
Knowledge Center
</div><!--
--><div class="height-hold"></div>
CSS：
div{
width: 130px;
background-color: #efefef;
font-size: 16px;
text-align: center;
position: relative;
display: inline-block;
vertical-align: middle;
}
div::after{
content: '';
width: 2px;
height: 100%;
background-color: #fff;
position: absolute;
right: 0;
top: 0;
}
.height-hold{
height: 40px;
width: 0;
display: inline-block;
vertical-align: middle;
}
class为height-hold的div是用来将垂直居中的高度撑起到需要的固定高度，所以width设为0，处于不可见状态。
div之间的``是用来消除inline-block元素之间的默认间距，更多消除默认间距的方法请见张鑫旭大神的博客
最后的页面呈现如下图：
当然这只是个简单实例，只是为了展示出居中效果。实际使用时可以将外层div设置
backround-color，就可以呈现正常的导航条效果了。
这种方式是传统HTML+CSS布局里比较好用的多行文本固定高度垂直居中的方式了，当然也有其缺点，首先就是最后用于撑起高度的div破坏了HTML的语义化，类似于.clearfix，其次消除inline-block默认间隔的方法都不够优雅，同样破坏了HTML的语义化。所以之后打算研究一下flex和gird，希望能找到更好的解决方案。
