html 中div垂直居中的三种方式

2.第二种:

  1. <style type="text/css">   
  2. <!--   
  3. .con_div{   
  4. width:400px;   
  5. height:300px;   
  6. border:1px solid #777;   
  7. text-align:center;   
  8. display:table-cell;   
  9. vertical-align:middle;   
  10. background:red;   
  11. color:#fff   
  12. }   
  13. /*FOR IE*/  
  14. .fixie{   
  15. width:0;   
  16. height:100%;   
  17. display:inline-block;   
  18. vertical-align:middle;   
  19. }   
  20. -->   
  21. </style>   
  22.   
  23. <div class="con_div">   
  24. <span class="fixie"></span>   
  25. 测试内容   
  26. </div>

3.第三种:

  1. <style>  
  2. #warp {   
  3.   position: absolute;   
  4.   width:500px;   
  5.   height:200px;   
  6.   left:50%;   
  7.   top:50%;   
  8.   margin-left:-250px;   
  9.   margin-top:-100px;   
  10.   border: solid 3px red;   
  11. }   
  12. </style>  
  13. <body>  
  14.   <div id=warp>Test</div>  
  15. </body>  

 

 

 

 

你可能感兴趣的:(html,测试,div,border)