纯CSS实现多行文字垂直居中几种方法解析

　　场景：父元素 高度固定，如何使其中的文字垂直居中？

1、table布局：

　　利用display:table+display:table-cell的方法

"en">

    "UTF-8">
    



class="middle-box">
    
class="middle-inner">
        
class="suc-tip">前端开发博客，专注前端开发和web教程
class="suc-link">快捷入口："http://caibaojian.com">http://caibaojian.com
        
"">class="suc-tip">5年的老博客，一直致力于WEB开发
    

"en">

    "UTF-8">
    



class="">
    
class="middle-inner">
        
class="suc-tip">前端开发博客，专注前端开发和web教程
class="suc-link">快捷入口："http://caibaojian.com">http://caibaojian.com
        
"">class="suc-tip">5年的老博客，一直致力于WEB开发
    

效果：

　　利用display:table-cell

"en">

    "utf-8">
    
    
    
  
        测试文字测试文字  
    
  
    
  
        测试文字测试文字  
    
  
    
  
        
测试文字测试文字
        
测试文字测试文字
    
  

　　效果：

　　优点：等高布局，无需设置高度，文字轻松实现垂直居中

　　缺点：ie7以下不兼容！

2、利用line-height和vertical-align：

"en">

    "utf-8">
    
    
    
  
        测试文字测试文字  
    
  
    
  
        测试文字 
 测试文字
 测试文字
 测试文字
 测试文字
 测试文字  
    

　　效果：

　　关键样式：

　　① 父元素（这里是div）设置和高度一致的 line-height （这里是200px）--- 由后面的vertical-align定义看，这是为了设置div的基线

　　② 子元素 (这里是span) 设置合适的line-height，并设置display:inline-block、vertical-align: middle;  --- inline水平的元素无法设置line-height，所以这里要设置inline-block。

　　重新审视一下 CSS vertical-align 属性 的定义：

　　该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许指定负长度值和百分比值，这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

　　有以下几点需要注意：

　　① vertical-align属性应该设置到 行内元素上（行内块元素也可）

　　② 如果文字的总高度超出了 容器（这里是div）的高度，那么垂直居中会失效。

　　③ ie7以下 span结束标签和内部内容不能有间隔空白，也就是说span的结束标签和内部内容要连在一起。