方法一：

代码：

 1 <style>  
 2 
 3     *{padding: 0;margin:0;font-size: 12px;}  
 4     div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid #00b8ff; line-height: 200px;text-align: center;}  
 5     span{display: inline-block;vertical-align: middle;line-height: 22px;}  
 6 </style>  
 7   
 8 <div>  
 9     <span>测试文字测试文字</span>  
10 </div>  
11 <div>  
12     <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>  
13 </div>  

 

结果图：

关键样式：

① 父元素（这里是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的结束标签和内部内容要连在一起。

 

方法二：

利用display:table-cell。

 1 <style>  
 2     *{padding: 0;margin:0;font-size: 12px;}  
 3     div{display: table-cell;width: 200px;border:1px solid #00b8ff;vertical-align: middle;}  
 4 </style>  
 5   
 6 <div>  
 7     <span>测试文字测试文字</span>  
 8 </div>  
 9 <div>  
10     测试文字测试文字  
11 </div>  
12 <div>  
13     <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>  
14 </div>  

 

结果截图：

 

 

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

缺点：ie7以下不兼容！