CSS实现水平垂直居中

今天对元素的水平垂直居中复习了一下，总结了这篇文章。   
第一种:
CSS代码：

1. .cell{ margin:10px;background-color: #ccc; width:200px; height:200px; color:#457344; }
   

2. .center1{text-align: center;  line-height: 200px;}
   

3. .center1 img,.center1 span{vertical-align: middle;}

复制代码

HTML代码:

1. 
   

   
   

2.      
   

3. 
   

4. 
   

   
   

5.      ssssssssss
   

6. 
   

7. 
   

复制代码

效果图：

这种方法使用text-align和vertical-align，line-height来实现居中，不过只适用于行内元素且不兼容IE6，第二种居中将解决IE6兼容问题。

第二种
修改CSS代码:

1. .center2{ text-align: center; _position: relative; 
   

2. line-height: 200px;}
   

3. .center2 span{ _position: absolute;  top:50%; left:50%;}
   

4. .center2 img{_position: relative; top:-50%;left:-50%;
   

5. vertical-align: middle; }

复制代码

HTML结构:

复制代码

效果图：

因为IE6，7不支持table-cell，所以IE6，7中显示不正常。设置左右边距的auto来实现水平居中。

第四种
CSS代码：

1. .center4{ display: table-cell; vertical-align: middle;
   

2. text-align: center }
   

3. .center4 div{width:100px; padding:10px; background:#333; 
   

4. display: inline-block; }

复制代码

HTML代码：

1. 
   

   
   

2. 
   

3.       居中
   

4.    
   

5. 
   

6. 
   

复制代码

因为IE6，7不支持table-cell，所以IE6，7中显示不正常。设置元素的display:inline-block而具有行内元素的特性，因此可用text-align:center使其水平居中。

第五种
CSS代码：

1. .center5 { text-align: center}
   

2. .center5 div{ display: inline-block; width:100px;padding: 10px;
   

3. background-color: #333;}

复制代码

HTML代码：

1. 
   

2.    

   
   

3.       

4. 
   

5.          居中
   

6.          
   

7.       
   

8.      
   

9. 
   

复制代码

既然IE6，7不支持table-cell,于是干脆使用表格嵌套使其居中，因为td已经默认设置了vertical-align:middle。

此文由 at-lib网站目录 编辑，未经允许不得转载！：