<!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" /> <meta name="description" content="图片在DIV中垂直水平都居中" /> <meta name="keywords" content="图片在DIV中垂直水平都居中" /> <meta name="author" content="liu" /> <title>图片在DIV中垂直水平都居中</title> <style> .middle-out{width:708px;height:385px;position: relative;display: table-cell;vertical-align:middle;border:1px solid #f00;text-align:center;} .middle-in{position:static;*position:absolute;top:50%;} .middle-out .middle-in img{position:static;*position:relative;top:-50%;left:-50%;} </style> </head> <body> <div class="middle-out"> <div class="middle-in"> <img src="http://s2.sinaimg.cn/mw690/4990aec6h9669862fd7e1&690" /> </div> </div> </body> </html>