如何使用純CSS實現圖片水平垂直居中于DIV

這篇文章主要為大家展示了“如何使用純CSS實現圖片水平垂直居中于DIV”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何使用純CSS實現圖片水平垂直居中于DIV”這篇文章吧。

HTML代碼：

<div class=”demo”><a href=“#”><img src=“images/01.jpg” /></a></div>

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”:“auto”);height:expression(this.height>140?“140px”:“auto”);}

其中For IE6中的css有這么一段：

width:expression(this.width>200?“200px”:“auto”);height:expression(this.height>140?“140px”:“auto”);

這是限制IE6下圖片的最大寬和最大高，就像非IE6下的：

max-width:200px;max-height:140px;

是一個道理。

以上是“如何使用純CSS實現圖片水平垂直居中于DIV”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！