[置顶] html 中div垂直居中的三种方式

[java]  view plain  copy
  1. 1.第一种:  
[java]  view plain  copy
  1. <ol class="dp-j"><li><span><span><style type=</span><span class="string"><span style="color: #0000ff;">"text/css"</span></span><span>>   </span></span></li><li><span><!--   </span></li><li><span>.con_div{   </span></li><li><span>width:400px;   </span></li><li><span>height:300px;   </span></li><li><span>border:1px solid #</span><span class="number"><span style="color: #c00000;">777</span></span><span>;   </span></li><li><span>text-align:center;   </span></li><li><span>display:table-cell;   </span></li><li><span>vertical-align:middle;   </span></li><li><span>background:red;   </span></li><li><span>color:#fff;   </span></li><li><span>line-height:300px;   </span></li><li><span>}   </span></li><li><span>-->   </span></li><li><span></style>   </span></li><li><span>  </span></li><li><span><div </span><span class="keyword"><strong><span style="color: #7f0055;">class</span></strong></span><span>=</span><span class="string"><span style="color: #0000ff;">"con_div"</span></span><span>>   </span></li><li><span>测试内容ddddddddddd   </span></li><li><span></div>  </span></li></ol>  

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,DIV垂直居中,html垂直居中)