方法一：

　　思路：利用text-align屬性將圖片水平居中，然后設置padding-top的值使其垂直居中。

　　結構如下：

　　<div>

　　<img src="images/tt.gif" width="150" height="100" />

　　</div>

　　CSS樣式如下：

　　div {300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}

　　運行結果如下：

　　

方法二：

　　思路：只用padding屬性，通過計算求得居中

　　結構代碼同上；

　　CSS樣式如下：

　　div {225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}

　　備注：這里DIV的寬高計算都遵循盒模型原理，計算方法同上。

　　方法三：

　　思路：

　　利用圖片的margin屬性將圖片水平居中，利用DIV的padding屬性將圖片垂直居中。

　　結構代碼同上；

　　CSS代碼如下：

　　div {300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}

　　img {display:block; margin:0 auto;}

　　備注：

　　Img是內聯元素，要設置其margin屬性使其居中，就要將其轉換為塊元素display:block;然后利用margin:0 auto;實現圖片的水平居中；（有的設計師為圖片再加個div標簽，然后通過div標簽的margin實現居中

http://zhidao.baidu.com/link?url=u2Sh1t3AcCqRjd0isIK27_rim1eSx06HmTItZPvfeazgj2mYFluTLzpWfOFqzIUyvikhSTRRizI3h680woVInq

總結

以上是生活随笔為你收集整理的让图片在div 中居中的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。