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

逃离我推掉我的手 2022-07-16 01:49 170阅读 0赞

### **敬请关注公众 ：包含全套 Vue 最新面试题  js最近面试题 等大量前端知识技术。** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70][]

**单行文字**  
可能很多人都知道如何让单行文字垂直居中显示，就是使用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;}

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

![Center][]

![Center 1][]

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

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

看下bug的效果图

![Center 2][]

于是开始解决bug

代码修改如下

![Center 3][]

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

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

<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

附带一张丑图

![Center 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htMTAzNzc4Mjg0Mw_size_16_color_FFFFFF_t_70]: /images/20220716/db43de9131314d9383a78a183e14cd37.png
[Center]: /images/20220716/433a2a931cb34b55b0e2a04c57a80352.png
[Center 1]: /images/20220716/17b84b27f3d14b7e99120e6722dd5a47.png
[Center 2]: /images/20220716/e6e633b3e6b641918e9ab2ff6465a077.png
[Center 3]: /images/20220716/d80e0d10fbda40c69317a7d49cf4d010.png
[Center 4]: /images/20220716/57984954e78148c28d35d4ac4f75ff0b.png