多行文本垂直方向上居中方法总结

问题描述

最近写项目的时候遇到个问题，数据从后台发送过来，可能是1行文本或者2行文本，要求居中显示。如果按照height=line-height的方式来做，当文本是2行的时候就会使得2行文本的间距非常大。

解决办法：

1.首先给需要居中的元素外面再包一层div作为父元素。
2.然后设置父元素的height=line-height，按照最大可能2行的高度来设置。
3.对目标子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。
4.对目标子元素单独设置合适的行高line-height属性
5.对目标子元素设置vertical-align:middle属性，使其基线对齐。

查看效果，无论是单行文本还是多行文本，都成功居中了！

第三布的display:inline-block，也可以换成display:inline-box