浅析CSS实现水平垂直同时居中的5种思路

水平居中和垂直居中已经单独介绍过，本文将介绍水平垂直同时居中的5种思路

思路一：  text-align + line-height实现单行文本水平垂直居中

1. <style>   
2. .test{   
3.     text-align: center;   
4.     line-height: 100px;   
5. }   
6. </style>  

1. <div class="test" style="background-color: lightblue;width: 200px;">测试文字</div>   

思路二： text-align + vertical-align

【1】在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素

[注意]若兼容IE7-浏览器，将结构改为<table>结构来实现table-cell的效果；用display:inline;zoom:1;来实现inline-block的效果

1. <style>   
2. .parent{   
3.     display: table-cell;   
4.     text-align: center;   
5.     vertical-align: middle;   
6. }   
7. .child{   
8.     display: inline-block;   
9. }   
10. </style>  

1. <div class="parent" style="background-color: gray; width:200px; height:100px;">  
2.   <div class="child" style="background-color: lightblue;">测试文字</div>  
3. </div>   

【2】若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle

1. <style>   
2. .parent{   
3.     text-align: center;   
4.     line-height: 100px;   
5.     font-size: 0;   
6. }   
7. .child{   
8.     vertical-align: middle;   
9. }   
10. </style>  

1. <div class="parent" style="background-color: gray; width:200px; ">  
2.   <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">  
3. </div>