這篇文章主要講解了“如何實現不定寬高div內圖片垂直居中的css樣式”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何實現不定寬高div內圖片垂直居中的css樣式”吧！

十載專業(yè)網站建設公司歷程，堅持以創(chuàng)新為先導的網站服務，服務超過數千家企業(yè)及個人，涉及網站設計、app開發(fā)定制、微信開發(fā)、平面設計、互聯網整合營銷等多個領域。在不同行業(yè)和領域給人們的工作和生活帶來美好變化。

最簡單的方法莫過于設置外層元素的css屬性：

代碼如下:

div{
display: table-cell;
}

但是IE6/7并不支持這個css樣式，為了兼容它們可以采用下面的方法。

html的結構如下：

代碼如下:

<div><span></span><img src="test.png" ></div>

css代碼如下：

代碼如下:

div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
span{
line-height: 100%;
vertical-align: middle;
display: inline-block;
height: 100%;
}
img{
width: 100%;
vertical-align: middle;
}

通過設置以上屬性可以達到下圖的效果，圖片在div中垂直居中。
 
這個方法的原理是在img標簽前面插入一個空的span標簽，利用它來撐開div內的行高到100%。

感謝各位的閱讀，以上就是“如何實現不定寬高div內圖片垂直居中的css樣式”的內容了，經過本文的學習后，相信大家對如何實現不定寬高div內圖片垂直居中的css樣式這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

網站題目：如何實現不定寬高div內圖片垂直居中的css樣式
轉載注明：http://chinadenli.net/article14/ggicde.html

成都網站建設公司_創(chuàng)新互聯，為您提供關鍵詞優(yōu)化、網站設計公司、網站策劃、移動網站建設、企業(yè)網站制作、網站導航

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯