CSS图片垂直居中方法整理集合

2009-1-31 22:57:07 来源：本站 评论：
XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <style type="text/css">  
  3. * {margin:0;padding:0;}  
  4. div {  
  5.  width:500px;  
  6.  height:500px;  
  7.  border:1px solid #ccc;  
  8.  overflow:hidden;  
  9.  position:relative;  
  10.  display:table-cell;  
  11.  text-align:center;  
  12.  vertical-align:middle;  
  13.  }  
  14. div p {  
  15.  position:absolute;  
  16.  top:50%;  
  17.  }  
  18. img {  
  19.  position:relative;  
  20.  top:-50%;left:-50%;  
  21.  width:276px;  
  22.  height:110px;  
  23.  }  
  24. div>p,p>img {  
  25.  position:static;  
  26.  }  
  27. </style>  
  28.   
  29. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  

标准浏览器下另类方法:

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <style type="text/css">  
  3. body {  
  4.  margin:0;padding:0  
  5.  }  
  6. div {  
  7.  width:500px;  
  8.  height:500px;  
  9.  line-height:500px;  
  10.  border:1px solid #ccc;  
  11.  overflow:hidden;  
  12.  position:relative;  
  13.  text-align:center;  
  14.  margin:auto  
  15.  }  
  16. div p {  
  17.  position:absolute;  
  18.  top:50%  
  19.  }  
  20. img {  
  21.  position:relative;  
  22.  top:-50%;left:-50%;  
  23.  width:276px;  
  24.  height:110px  
  25.  }  
  26. div>p,p>img {  
  27.  position:static;  
  28.  vertical-align:middle  
  29.  }  
  30. p:after {  
  31.  content:".";font-size:1px;  
  32.  visibility:hidden  
  33.  }  
  34. </style>  
  35.   
  36. <div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>  

标准浏览器严格DTD下：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <style type="text/css">  
  3. body {  
  4.  margin:0;padding:0  
  5.  }  
  6. div {  
  7.  width:500px;  
  8.  height:500px;  
  9.  line-height:500px;  
  10.  border:1px solid #ccc;  
  11.  overflow:hidden;  
  12.  position:relative;  
  13.  text-align:center;  
  14.  margin:auto  
  15.  }  
  16. img {  
  17.  position:relative;  
  18.  top:-50%;left:-50%;  
  19.  width:276px;  
  20.  height:110px  
  21.  }  
  22. div p {  
  23.  position:absolute;  
  24.  top:50%  
  25.  }  
  26. div p,p>img {  
  27.  position:static;  
  28.  vertical-align:middle  
  29.  }  
  30. </style>  
  31.   
  32. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  

标准浏览器严格DTD下：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <style type="text/css">  
  3. body {  
  4.  margin:0;padding:0  
  5.  }  
  6. div {  
  7.  width:500px;  
  8.  height:500px;  
  9.  line-height:500px;  
  10.  border:1px solid #ccc;  
  11.  overflow:hidden;  
  12.  position:relative;  
  13.  text-align:center;  
  14.  margin:auto  
  15.  }  
  16. img {  
  17.  position:relative;  
  18.  top:-50%;left:-50%;  
  19.  width:276px;  
  20.  height:110px  
  21.  }  
  22. div p {  
  23.  position:absolute;  
  24.  top:50%  
  25.  }  
  26. div p,p>img {  
  27.  position:static;  
  28.  vertical-align:middle  
  29.  }  
  30. </style>  
  31.   
  32. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  

最简单当然是背景图片的方法拉

CSS代码
  1. * {margin:0;padding:0;}  
  2. div {  
  3.  width:500px;border:1px solid #f00;  
  4.  height:500px;  
  5.  background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat  
  6.  }  

相关阅读：

CSS高度自适应,CSS背景自动延伸

CSS高度自适应,CSS背景自动延伸２

CSS来控制网页背景

CSS中背景图片定位（转）

CSS设计：百分比进行背景图片定位（转）

上一篇：Web标准：Img图片在IE6下显示空白的Bug解决方案
下一篇：用CSS小技巧灵活的控制表单
正在读取…
我也评两句

   

版权说明：详细说明　网站所属：2006- © Syscy.com 三原色创意科技　 京ICP备08101643号