在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。


方法一

将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>方法1-未知高度的图片垂直居中-www.nowamagic.net</title><styletype="text/css">body{height:100%;}#box{width:500px;height:400px;display:table;text-align:center;border:1pxsolid#d3d3d3;background:#fff;}#boxspan{display:table-cell;vertical-align:middle;}#boximg{border:1pxsolid#ccc;}</style><!--[iflteIE7]><styletype="text/css">?#box{position:relative;overflow:hidden;}#boxspan{position:absolute;left:50%;top:50%;}#boximg{position:relative;left:-50%;top:-50%;}</style><![endif]--></head><body><divid="box"><span><imgsrc="p_w_picpaths/demo_zl.png"alt=""/></span></div></body></html>

方法二

标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>方法2-未知高度的图片垂直居中-www.nowamagic.net</title><styletype="text/css">body{height:100%;}#box{width:500px;height:400px;display:table-cell;text-align:center;vertical-align:middle;border:1pxsolid#d3d3d3;background:#fff;}#boximg{border:1pxsolid#ccc;}</style><!--[ifIE]><styletype="text/css">?#boxi{display:inline-block;height:100%;vertical-align:middle}#boximg{vertical-align:middle}</style><![endif]--></head><body><divid="box"><i></i><imgsrc="p_w_picpaths/demo_zl.png"alt=""/></div></body></html>

方法三

在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。

<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>方法3-未知高度的图片垂直居中-www.nowamagic.net</title><styletype="text/css">body{height:100%;}#box{width:500px;height:400px;text-align:center;border:1pxsolid#d3d3d3;background:#fff;}#boxp{width:500px;height:400px;line-height:400px;/*行高等于高度*/}/*兼容标准浏览器*/#boxp:before{content:".";/*具体的值与垂直居中无关，尽可能的节省字符*/margin-left:-5px;font-size:10px;/*修复居中的小BUG*/visibility:hidden;/*设置成隐藏元素*/}#boxpimg{*margin-top:expression((400-this.height)/2);/*CSS表达式用来兼容IE6/IE7*/vertical-align:middle;border:1pxsolid#ccc;}</style></head><body><divid="box"><p><imgsrc="p_w_picpaths/demo_zl.png"alt=""/></p></div></body></html>