/ 中存储网

div文字垂直居中有方法了!完美兼容各浏览器包括ie6

2017-03-08 00:24:08 来源:中存储网

一直以来大家都在研究怎么实现div文字垂直(竖直)居中问题,可惜没有好办法,现在有终极解决方法了,堪称完美 ,还支持浮动后的div,代码已测试IE6-9、firefox20、safari5.1.7 、chrome28(webkit)不是Blink,都没问题,代码如下:

  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>IT技术网 www.itjs.cn</title> 
  6. <style type="text/css"> 
  7. .wrap{ 
  8.  background: #000; 
  9.  width: 500px;  
  10.  height: 500px; 
  11.  color: #fff; 
  12.  display:table-cell; 
  13.  vertical-align: middle; 
  14.  float:right; 
  15. .verticalWrap{ 
  16.  position: relative; 
  17.  top: 50%; 
  18.  +top: 100%; 
  19. .vertical{ 
  20.  text-align: center; 
  21.  position: relative; 
  22.  top: -50%; 
  23.  +top: -50%; 
  24. </style> 
  25. </head> 
  26.  
  27. <body> 
  28. <div class="wrap"> 
  29.  <div class="verticalWrap"> 
  30.   <div class="vertical"> 
  31.    IT技术网<br/> 
  32.    itjs.cn<br/> 
  33. 好记,更好用!<br/> 
  34.   </div> 
  35.  </div> 
  36. </div> 
  37.  
  38. </body> 
  39. </html> 

 效果图:

div文字垂直居中,完美实现文字的上下竖直居中