完成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. border1px solid #FF0099;    
  4. background-color#FFCCFF;    
  5. width760px;    
  6. height400px;    
  7. *positionrelative;    
  8. overflowhidden;    
  9. }    
  10.   
  11. div#subwrap {    
  12. vertical-alignmiddle;    
  13. displaytable-cell;    
  14. *positionabsolute;    
  15. *top: 50%;    
  16. }    
  17.   
  18. div#content {    
  19. *positionrelative;    
  20. *top: ⑸0%;    
  21. }  
实际效果:
 

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