让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" lang="zh-CN"> <head> <title>图片垂直居中</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css" media="all"> #gv-content{width: 303px;height: 404px;background: #F63;position: relative;} #gv-content[id]{display: table;position: static;} #gv-middle{position: absolute;left: 0;top: 50%;} #gv-middle[id]{display: table-cell;vertical-align: middle;position: static;} #gv-inner{position: relative;left: 0;top: -50%;} </style> </head> <body> <div id="gv-content"> <div id="gv-middle"> <div id="gv-inner"> <img style="display:block;margin:0 auto;" src="http://www.poluoluo.com/images/logo.gif"/></div> </div> </div> </body> </html>
图片垂直居中
![](http://www.poluoluo.com/images/logo.gif)