方法一： <!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>phone center</title> <style type="text/css"> .box{ 100px; height:100px; border:1px solid #ccc; text-align:center; border:1px solid #ccc; } .box img{ vertical-align:middle; max-100%; } .box span{ display:inline-block; height:100%; 0px; overflow:hidden; vertical-align:middle; background:red; } </style> </head> <body> <div class="box"> <img src="ceshi/images/head-img.png" /><span></span> </div> </body> </html> 方法二： <!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>phone center</title> <style type="text/css"> .box{ 100px; height:100px; display:table-cell; text-align:center; vertical-align:middle; border:1px solid #ccc; } </style> </head> <body> <div class="box"> <img src="ceshi/images/head-img.png" /> </div> </body> </html> 方法三： <style> #box{500px;height:500px;position:relative;} #box img{100px;height:100px;position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px} </style> <div id="box"> <img src="xxx.jpg"> </div>