1. 爱易网页
  2. HTML教程
  3. 垂直居中及容器内图片垂直居中的CSS解决办法

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

日期：2014-05-17　 浏览次数：20957 次

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

相关资料更多>

  1. html a标签 图片边框和点击后虚线框的有关问题
  2. HTML文档中小meta标签的大作用
  3. 有关html标准，ie8上，插件不出
  4. HTML中的几种定位模式
  5. 同名cookie有关问题
  6. 有没有网页调试工具支持IPAD模拟的？该怎么处理
  7. 这样设置为何没显示为块状？该如何解决
  8. 样式发生冲突的时候.该如何解决
  9. html元素的 height、clientHeight跟offsetHeight之间的区别