日期:2014-05-17  浏览次数:20688 次

垂直居中及容器内图片垂直居中的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 ??