/ 中存储网
分类导航

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. } 
  16. .verticalWrap{ 
  17.  position: relative; 
  18.  top: 50%; 
  19.  +top: 100%; 
  20. } 
  21. .vertical{ 
  22.  text-align: center; 
  23.  position: relative; 
  24.  top: -50%; 
  25.  +top: -50%; 
  26. } 
  27. </style> 
  28. </head> 
  29.  
  30. <body> 
  31. <div class="wrap"> 
  32.  <div class="verticalWrap"> 
  33.   <div class="vertical"> 
  34.    IT技术网<br/> 
  35.    itjs.cn<br/> 
  36. 好记，更好用！<br/> 
  37.   </div> 
  38.  </div> 
  39. </div> 
  40.  
  41. </body> 
  42. </html> 

 效果图：

div文字垂直居中，完美实现文字的上下竖直居中
继续阅读