代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > css技巧 > DIV垂直居中的办法

DIV垂直居中的办法

css技巧 围观5732次 更新日期:2017-06-25 15:05:44 留下足迹

经过今天一翻改进,终于找出了解决DIV垂直居中的办法。
 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>CSS布局技巧:未知高度div 垂直居中的问题</title> 
  6. <style type="text/css"
  7. html,body 
  8. height100%
  9. padding:0
  10. margin:0
  11. body 
  12. min-height200px
  13. text-aligncenter
  14. min-width402px 
  15. .FirstDIV 
  16. margin-top-100px/* SecondDIV高度的一半 */ 
  17. floatleft
  18. width100%
  19. height50%
  20. .SecondDIV 
  21. clearboth
  22. bordersilver 1px solid
  23. background#666
  24. margin-leftauto
  25. overflowauto
  26. width400px
  27. margin-rightauto
  28. height200px
  29. text-alignleft 
  30. </style> 
  31. </head> 
  32. <body> 
  33. <div class="FirstDIV"></div> 
  34. <div class="SecondDIV"
  35. <p>看看,这不就居中了。呵呵。而且没有问题哦。www.Webjx.com </p> 
  36. <p>body{ background-color:#FFF5F0}<br> 
  37. div{ position:absolute; top:50%; left:50%margin:-100px 0 0 -200px
  38. width:400pxheight:200pxborder:1px #CCCC00 solidfont-family:Arial
  39. Helveticasans-serifcolor:#666666 } </p> 
  40. </div> 
  41. </body> 
  42. </html>  

转载请注明:代码学堂>web前端 > css技巧 > DIV垂直居中的办法

喜欢 (527) or 分享 (299)