实现div垂直居中的display:table-cell方法示例介绍

ttx9n

要实现盒模型中的div居中，可以使用display:table-cell方法且兼容多浏览器，下面有个示例，感兴趣的朋友可以练练手 ie7和ie6都不能识别 display: table-cell;（但是支持display: block等css1的属性！）
ie8以及以后版本可以识别！

ie7和ie6能识别vertical-align:middle;

如果盒模型中间只有几段文字的话，设置line-height就可以实现居中显示了！

如果要实现盒模型中的div居中，可以参考以下代码： 
CSS Code复制内容到剪贴板

1. div#wrap {    
2. display: table;    
3. border: 1px solid #FF0099;    
4. background-color: #FFCCFF;    
5. width: 760px;    
6. height: 400px;    
7. *position: relative;    
8. overflow: hidden;    
9. }    
10.   
11. div#subwrap {    
12. vertical-align: middle;    
13. display: table-cell;    
14. *position: absolute;    
15. *top: 50%;    
16. }    
17.   
18. div#content {    
19. *position: relative;    
20. *top: -50%;    
21. }  

效果：
 

这个是多浏览器兼容的，但是得写几层div~ 但是想在层或img在层中垂直水平居中该怎样做呢？下一篇会涉及到。

locopy

儿飞飞微风DVD谁vdsvd

Anthonylam

很好，谢谢分享

kwzc65wdj

笑纳了老板

locopy

撒旦撒旦撒擦擦擦擦

i3x3r3

这个源码还可以

vir5051

哦哦哦ijhhsdj

7jbiiz

激动人心，无法言表！

3t0ukmu

老大你好你好好你好

4r8oiin60

哈哈哈哈哈哈