完成div竖直垂直居中的display:table

2021-01-20 08:50 jianzhan
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: ⑸0%;    
  21. }  
实际效果：
 

这个是多访问器适配的，可是得写几层div~ 可是想在层或img在层中竖直水平垂直居中该如何做呢？下1篇会涉及到到。

为您推荐