文本垂直居中的方式

前言： 垂直居中是布局里常常会遇到的需求，其中文本垂直居中因为文本高度的不确定性更需要技巧一些。抛开目前讨论度很高的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，希望能找到更好的解决方案。