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

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

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

垂直居中及容器内图片垂直居中的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. css超链接的式样设定
  2. CSS float高度有关问题
  3. html5在android筹建滚动条
  4. 用仿ActionScript的语法回编写html5——第五篇，Graphics绘图
  5. 网页怎么随着浏览器的左右拉伸仍然保持居中
  6. html5 div呈圆形 扇形显示的式样
  7. HTML5,该如何解决
  8. js画图开发库-mxgraph-[userobject-对象描述.html]
  9. Html标签-Fieldset学习与应用