垂直居中及容器内图片垂直居中的CSS解决方法

Div与CSS布局,最让人头疼的就是容器内的东西如何垂直居中的问题,我在做站时也遇到,查了一下资料,总结出以下居中办法,兼容IE与及 Firefox!

方法一

Html代码 复制代码
  1. <style type="text/css">  
  2. <!--    
  3. * {margin:0;padding:0}   
  4. div {   
  5.   width:500px;   
  6.   height:500px;   
  7.   border:1px solid #666;   
  8.   overflow:hidden;   
  9.   position:relative;   
  10.   display:table-cell;   
  11.   text-align:center;   
  12.   vertical-align:middle   
  13. }   
  14. div p {   
  15.   position:static;   
  16.   +position:absolute;   
  17.   top:50%   
  18.   }   
  19. img {   
  20.   position:static;   
  21.   +position:relative;   
  22.   top:-50%;left:-50%;   
  23.   }   
  24. -->  
  25. </style>  
  26. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  

方法二

Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>div里面图片垂直居中的几个例子</title>  
  6. <style type="text/css">  
  7. <!--    
  8. body {   
  9.   margin:0;padding:0   
  10. }   
  11. div {   
  12.   width:500px;   
  13.   height:500px;   
  14.   line-height:500px;   
  15.   border:1px solid #666;   
  16.   overflow:hidden;   
  17.   position:relative;   
  18.   text-align:center;   
  19. }   
  20. div p {   
  21.   position:static;   
  22.   +position:absolute;   
  23.   top:50%   
  24. }   
  25. img {   
  26.   position:static;   
  27.   +position:relative;   
  28.   top:-50%;left:-50%;   
  29.   vertical-align:middle   
  30. }   
  31. p:after {   
  32.   content:".";font-size:1px;   
  33.   visibility:hidden   
  34. }   
  35. -->  
  36. </style>  
  37. </head>  
  38. <body>  
  39. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  
  40. </body>  
  41. </html>  

方法三

Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>div里面图片垂直居中的几个例子</title>  
  6. <style type="text/css">  
  7. <!--    
  8. * {margin:0;padding:0}   
  9. div {   
  10.   width:500px;   
  11.   height:500px;   
  12.   line-height:500px;   
  13.   border:1px solid #666;   
  14.   overflow:hidden;   
  15.   position:relative;   
  16.   text-align:center;   
  17. }   
  18. div p {   
  19.   position:static;   
  20.   +position:absolute;   
  21.   top:50%;   
  22.   vertical-align:middle   
  23. }   
  24. img {   
  25.   position:static;   
  26.   +position:relative;   
  27.   top:-50%;left:-50%;   
  28.   vertical-align:middle   
  29. }   
  30. -->  
  31. </style>  
  32. </head>  
  33. <body>  
  34. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  
  35. </body>  
  36. </html>  

方法四(针对背景图片居中)

Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>div里面图片垂直居中的几个例子</title>  
  6. <style type="text/css">  
  7. <!--    
  8. * {margin:0;padding:0;}   
  9. div {   
  10.   width:500px;border:1px solid #666;   
  11.   height:500px;   
  12.   background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat   
  13. }   
  14. -->  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div></div>  
  19. </body>  
  20. </html>  

转自(http://www.ok22.org/art_detail.aspx?id=73)

你可能感兴趣的:(html,XHTML,css,Google,IE)