当前位置： 代码迷 >> HTML/CSS >> 垂直居中及容器内图片垂直居中的CSS解决办法
  详细解决方案

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

热度：100   发布时间：2012-10-26 10:30:58.0
垂直居中及容器内图片垂直居中的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)

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.