大小不固定，多行文字的垂直居中

 本人录制的视频Vue全套学习学习视频：B站

小胖梅-的个人空间_哔哩哔哩_Bilibili

单行文字
可能很多人都知道如何让单行文字垂直居中显示，就是使用line-height，将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码：height:3em; line-height:3em; ……

line-height:40px;height:40px;

多行文字

如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？
实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。
核心css代码如下，
外部div标签：

div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}

内部span标签：

span{display:inline-block; font-size:0.1em; vertical-align:middle;}

自己做了一下测试代码如下

在ie8以上的浏览器都显示正常，但是在ie6 和ie7上面都不能正常显示，于是我哭死在厕所

本以为可以很自豪的解决，今天一测试，竟然有bug啊啊啊

看下bug的效果图

于是开始解决bug

代码修改如下

对一段多行的文字看一个整体，有三层的关系，进行代码的修改

这个代码看着更清新一点：

<div class="middle-box">
	<div class="middle-inner">
		<p><span>这是很多文字只是很多文字这是很多文字...</span></p>
	</div>
</div>

.middle-box{display: table; height: 300px; border:1px solid #ff0000; width:400px; margin:0 auto; position:relative;}
.middle-inner{display: table-cell; vertical-align:middle; *position:absolute; *top:50%; *left:50%; width:100%; text-align:center;}
.middle-inner p{position:relative; *top:-50%; *left:-50%;}

于是很好  解决了ie上面的bug

附带一张丑图