問：如何讓圖片在DIV中水平和垂直兩個方向都居中？（注意這里的圖片非用作背景）

關于該問題的解決方法如下：

方法一：

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

結構如下：

<div>

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

</div>

CSS樣式如下：

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

運行結果如下：

釋義：

圖片的尺寸為150x100px，DIV的大小為300x200px；

background-color:#CCC; border:#000 1px solid;為DIV加個邊框和背景色，便于觀察效果。

text-align:center,實現圖片的水平居中；padding-top:50px，50px這個數值是經過計算得到的，padding-top的值具體算法如下：（DIV的高度 – 圖片的高度）/2，但這里要注意，根據盒模型原理，我們還要將DIV原來的高度200減去padding-top的值，這樣顯示的才是正確的，否則DIV會變高。

方法二：

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

結構代碼同上；

CSS樣式如下：

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

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

方法三：

思路：

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

結構代碼同上；

CSS代碼如下：

div {width: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實現居中，也可以，不過，在結構中就又多了對div，相對麻煩點）至于垂直居中的方法和前面的都一樣，就不再重述。

以上方法都是有前提的，就是必須知道DIV與圖片的尺寸，否則無法完成垂直居中的效果；如我們不知道圖片的尺寸又該如何？其實在CSS樣式沒有支持垂直居中屬性之前，最好的解決辦法就是用表格去做。

當然，實現一個效果有多種途徑，可謂條條大路通羅馬，還有很多方法和途徑能實現該效果，只要你肯于鉆研。