css控制图片在div内垂直居中效果，兼容所有浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片垂直居中</title> <style type="text/css"> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none; color:#333;} a:hover{text-decoration:underline; color:#F00;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} .clearfix:after{ content:"\020"; display:block; height:0; clear:both; visibility:hidden;} .clearfix{ zoom:1;} .piclist{ width:780px; border:1px solid #000; padding:10px 0; margin:0 auto;} .piclist ul li{ float:left; width:162px; padding:5px;border:1px solid #000; margin:4px 0 0 16px;} .piclist ul li .thumb{ width:160px; height:160px; background:#CCC; border:1px solid #333;line-height:0; font-size:0; text-align:center;} .piclist ul li .thumb .hfix{ height:100%; display:inline-block; width:1px; vertical-align:middle; margin:0 -1px;}/* 图片旁加入此类 */ .piclist ul li .thumb img{ vertical-align:middle; position:relative; left:1px; margin-left:-1px;} .piclist ul li dl{ padding-top:5px;} .piclist ul li dl dt{ font-weight:bold;} .piclist ul li dl dd{ color:#999;} </style> </head> <body> <h1 align="center">图片垂直居中</h1> <div class="piclist clearfix"> <ul> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> <li> <div class="thumb"><span class="hfix"></span><img src="http://dbscthumb.phinf.naver.net/0279_000_17/20110307165045612_ZYSHF7R01.jpg/Sandro_Botticelli_076.jpg?type=r160" width="160" height="93" /></div> <dl> <dt>图片标题</dt> <dd>图片介绍图片介绍图片介绍图片介绍</dd> </dl> </li> </ul> </div> </body> </html>
提示：你可以先修改部分代码再运行。