未知大小图片上下左右居中（兼容IE 6 7 8 9 chrome firefox）
事例图：
直接上代码：
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html;charset=GB2312"> <title>未知大小图片上下左右居中</title> <style type="text/css"> *{margin:0;padding:0;} body{font-size:12px;} img{border:none;vertical-align:middle;} .cf:after{content:"";display:table;clear:both} .cf{*zoom:1} .layout{width:960px;margin:0 auto;} .l30{line-height:30px;} .picList{border:1px solid #CCC;margin:10px 0;padding:10px 0;} .picList li{float:left;margin:0 7px;text-align:center;display:inline;} .picList .pic:hover{background:#CCC;} .picList1 li{width:140px;} .picList1 .pic{width:140px;height:140px;line-height:140px;border:1px solid #E9E9E9;background:#F5F5F5; display:table-cell; vertical-align:middle; *display:block; *font-size:120px; /* 140 * 0.857 = 120 */ } .picList2 .pic{width:240px;} .picList2 .pic{width:240px;height:240px;line-height:240px;border:1px solid #E9E9E9;background:#F5F5F5; display:table-cell; vertical-align:middle; *display:block; *font-size:205px; /* 240 * 0.857 = 205 */ } </style></head><body> <div href=""><img src="images/img3.jpg" alt="未知大小图片下上左右居中（兼容IE 6 7 8 9 chrome firefox）" /></a><p href=""><img src="images/img4.jpg" alt="未知大小图片下上左右居中（兼容IE 6 7 8 9 chrome firefox）" /></a><p href=""><img src="images/img5.jpg" alt="未知大小图片下上左右居中（兼容IE 6 7 8 9 chrome firefox）" /></a><p href=""><img src="images/img3.jpg" alt="未知大小图片下上左右居中（兼容IE 6 7 8 9 chrome firefox）" /></a><p href=""><img src="images/img4.jpg" alt="未知大小图片下上左右居中（兼容IE 6 7 8 9 chrome firefox）" /></a><p href=""><img src="images/img5.jpg" alt="未知大小图片下上左右居中（兼容IE 6 7 8 9 chrome firefox）" /></a><p href=""><img src="images/img3.jpg" alt="未知大小图片下上左右居中（兼容IE 6 7 8 9 chrome firefox）" /></a><p href=""><img src="images/img4.jpg" alt="未知大小图片下上左右居中（兼容IE 6 7 8 9 chrome firefox）" /></a><p href=""><img src="images/img5.jpg" alt="未知大小图片下上左右居中（兼容IE 6 7 8 9 chrome firefox）" /></a><p class="l30"><a href="">图片3</a></p></li> </ul> </div></body></html>