纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
【更新时间:2013-12-11】    【来源:前端开发_DEDE007.COM】

一个问题一直困扰着不少前端制作人员(也称前端开发工程师,o(∩_∩)o)。如题,如何实现一张未知宽高的图片在一个Div里面水平垂直居中呢?相信部分前端Sir首先想的是Table布局,是的,实现起来不是很麻烦,但肯定也有和浩子一样有代码洁癖的人。在这里,浩子忽略Table的实现方法,有兴趣的也可以去研究一下。下面介绍下用Html和CSS来实现如题效果。

<!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" />
<link href="http://img.daqianduan.com/ui/favicon.ico" rel="shortcut icon">
<title>纯CSS实现图片水平垂直居中于DIV(图片未知宽高)</title>
<link type="text/css" rel="stylesheet" href="http://www.daqianduan.com/demo/css/common.css" />
<style type="text/css">
/*For Firefox Chrome*/
.demo { border: 1px #ddd solid; width: 208px; height: 148px; overflow: hidden; text-align: center; display: table; float: left; margin: 50px; position: relative; }
.demo a { display:table-cell; vertical-align: middle; width: 200px; height: 140px; }
.demo a img { border: 1px #ddd solid; margin: 0 auto; max-width: 200px; max-height: 140px; }

/*For IE7*/
*+html .demo a { position: absolute; top: 50%; width: 100%; text-align: center; height: auto; }
*+html .demo a img { position: relative; top: -50%; left: -50%; }

/*For IE6*/
*html .demo a { position: absolute; top: 51%; width: 100%; text-align: center; height: auto; display: block; }
*html .demo a img { position: relative; top: -50%; left: -50%; width:expression(this.width>200?"200px":"atuo");
height:expression(this.height>140?"140px":"atuo");
}
</style>
</head>

<body>
<h1>纯CSS实现图片水平垂直居中于DIV(图片未知宽高)</h1>
<div class="demo"><a href="#"><img src="http://www.daqianduan.com/demo/images/03.jpg" />纯CSS实现图片水平垂直居中于DIV(图片未知宽高)</a></div>
</body>
</html>