标签：
在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。
将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很 方便的使用vertical-align属性来对齐其中的内容了。
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title> 5 <style type="text/css"> 6 body { 7 height:100%; 8 } 9 #box{ 10 width:500px;height:400px; 11 display:table; 12 text-align:center; 13 border:1px solid #d3d3d3;background:#fff; 14 } 15 #box span{ 16 display:table-cell; 17 vertical-align:middle; 18 } 19 #box img{ 20 border:1px solid #ccc; 21 } 22 </style> 23 <!--[if lte IE 7]> 24 <style type="text/css">? 25 #box{ 26 position:relative; 27 overflow:hidden; 28 } 29 #box span{ 30 position:absolute; 31 left:50%;top:50%; 32 } 33 #box img{ 34 position:relative; 35 left:-50%;top:-50%; 36 } 37 </style> 38 <![endif]--> 39 40 </head> 41 42 <body> 43 <div id="box"> 44 <span><img src="images/demo_zl.png" alt="" /></span> 45 </div> 46 47 </body> 48 </html>
标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>方法2 - 未知高度的图片垂直居中 - www.nowamagic.net</title> 5 6 <style type="text/css"> 7 body { 8 height:100%; 9 } 10 #box{ 11 width:500px;height:400px; 12 display:table-cell; 13 text-align:center; 14 vertical-align:middle; 15 border:1px solid #d3d3d3;background:#fff; 16 } 17 #box img{ 18 border:1px solid #ccc; 19 } 20 </style> 21 <!--[if IE]> 22 <style type="text/css">? 23 #box i { 24 display:inline-block; 25 height:100%; 26 vertical-align:middle 27 } 28 #box img { 29 vertical-align:middle 30 } 31 </style> 32 <![endif]--> 33 34 35 36 </head> 37 38 <body> 39 <div id="box"> 40 <i></i><img src="images/demo_zl.png" alt="" /> 41 </div> 42 43 44 </body> 45 </html>
在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 4 <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title> 5 6 <style type="text/css"> 7 body { 8 height:100%; 9 } 10 #box{ 11 width:500px;height:400px; 12 text-align:center; 13 border:1px solid #d3d3d3;background:#fff; 14 } 15 #box p{ 16 width:500px;height:400px; 17 line-height:400px; /* 行高等于高度 */ 18 } 19 20 /* 兼容标准浏览器 */ 21 #box p:before{ 22 content:"."; /* 具体的值与垂直居中无关，尽可能的节省字符 */ 23 margin-left:-5px; font-size:10px; /* 修复居中的小BUG */ 24 visibility:hidden; /*设置成隐藏元素*/ 25 } 26 27 #box p img{ 28 *margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */ 29 vertical-align:middle; 30 border:1px solid #ccc; 31 } 32 </style> 33 34 </head> 35 36 <body> 37 <div id="box"> 38 <p><img src="images/demo_zl.png" alt="" /></p> 39 </div> 40 41 </body> 42 </html>
文章来自：http://www.nowamagic.net/librarys/veda/detail/1950
标签：
原文地址：http://www.cnblogs.com/webqiand/p/4397882.html
