方法一: 已知图片大小 <div style="width:128px;height:128px;background-color:cyan;text-align:center;position:relative;"> <img style="position:absolute; left:50%; top:50%;margin:-8px 0 0 -8px;" src="http://bbs.blueidea.com/images/smilies/default/eek.gif" mce_src="http://bbs.blueidea.com/images/smilies/default/eek.gif"></div> -8px是图像寬高的一半 方法二:(针对背景图片居中) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div里面图片垂直居中的几个例子</title> <mce:style type="text/css"><!-- * {margin:0;padding:0;} div { width:500px;border:1px solid #666; height:500px; background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat } --></mce:style><style type="text/css" mce_bogus="1"> * {margin:0;padding:0;} div { width:500px;border:1px solid #666; height:500px; background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat }</style> </head> <body> <div></div> </body> </html> 更详细的说明另见:http://www.hibloger.com/article.asp?id=75