整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
論是做web前端還是手機端的前端頁面，我們經常會用到的就是圖片不規則，而我們又需要這個圖片在容器上以水平垂直居中顯示，如上圖。
其實這個也很簡單，直接上我寫的樣式：
CSS：
<style type="text/css">
.img-container{width: 100%; float: left}
.img-container span{width:120px;height:120px;overflow:hidden;position:relative;text-align:center;vertical-align:middle; border:#ccc 1px solid; float: left; margin-left: 20px; padding:7px; display: block;}
.img-container span a{position:absolute;top:50%; left: 50%; transform: translate(-50%, -50%);}
.img-container span a img{max-width:120px;max-height:120px; }
</style>
代碼：
<div class="img-container">
<span>
<a href=""><img src="https://img0.baidu.com/it/u=4137924777,4215971248&fm=26&fmt=auto&gp=0.jpg" alt=""></a>
</span>
<span>
<a href=""><img src="https://img1.baidu.com/it/u=415185236,4221481113&fm=26&fmt=auto&gp=0.jpg" alt=""></a>
</span>
<span>
<a href=""><img src="https://img2.baidu.com/it/u=1654250371,945534091&fm=11&fmt=auto&gp=0.jpg" alt=""></a>
</span>
</div>
白郁悶的找到老朱說道：“朱哥，我想讓一個塊容器在一個容器里面垂直居中怎么這么難啊！”
老朱：“你是怎么實現的？”
小白說：“比如一個容器的高度是400px，子容器的高度是300px，我就把子容器CSS上邊距設置成50px。”
“那要是父容器高度發生變化你的子容器豈不是很麻煩”
小白郁悶的說道：“你可說吧！頭疼的很！怎么才能輕松的設置垂直居中啊？”
老朱說：“如果一個容器只有一行文字和圖片，我們可以設置容器的高度和line-height一致就可以保證文字和圖片居中，但是多行圖片，或者容器里面嵌套了其他塊元素就很麻煩了。還有一種情況就像你剛剛兩個div嵌套，子容器也是個塊元素，垂直居中直接用CSS會很麻煩，正好今天想跟你說說怎么給jQuery添加擴展方法，索性咱就以這個為例子進行討論吧！”
小白高興的說道：“又有新知識學了，什么事給jQuery添加擴展方法呢？”
“我們使用$(選擇器)生成的對象有很多默認jQuery方法，你應該知道吧？”
小白說道：“知道啊！獲取和修改容器html內容的html()方法、獲取和修改屬性的attr()方法、修改元素css樣式的css()方法、獲取元素高度的height()方法、還有控制容器顯示的show()方法……”
“停~！差不多了，這些都是jQuery自帶的方法，假如我們想自己增加一個方法可以用$.fn添加。我現在給你寫一個能夠輸出當前容器高度和父容器高度的方法你看看！”
“子容器和父容器的高度在CSS中都有過設定，因此我通過$.fn添加mid方法以后，再通過選擇器找到sun容器就可以直接使用mid方法了。”
小白突然靈光一現，說道：“朱哥我知道怎么設置一個讓塊容器基于父容器垂直居中了，你稍等我一會，我再你的代碼基礎上改一下！”
也就兩分鐘的時間，小白就把代碼拿到了老朱面前，“你看，我寫好了！”
“現在我想讓sun容器基于main垂直居中只需要使用一下$("#sun").mid()就可以實現了，以后父容器不管怎么變化，它都是基于父容器居中的。”
老朱說道：“如果有多行塊容器，或者多行文本、圖片怎么辦？”
小白說道：“那就給他們外面再嵌套一個塊容器就可以了么！對不對啊？”
“不錯，通過給他們嵌套一個塊容器，然后再讓這個塊容器基于父容器垂直居中就可以了！小白我相信你還能再寫一個基于底部對齊的方法吧？”
小白自信的說道：“再這個方法上改一下就可以了，稍等~”
“嗯，不錯，如果你發現以后經常會用到這兩種居中方式，可以把他們放到一個js文件里面，以后用的時候把這個js文件引入，就可以直接使用mid和bottom方法了。”
“$.fn確實是個好東西！看來我以后得經常添加自己的方法了，哈哈，我去練習了~”
想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！
過前端開發的朋友都知道，要使文字在一個div容器垂直居中顯示是很簡單的事，但是如果是要讓一張圖片在div容器中垂直顯示那就有點傷腦筋了，因為圖片是個置換元素，有些特殊的特性，對于前端開發的大牛來說還好，解決方法有很多，比如什么利用js啊之類的，但是這些對于初學者來說就有些難度了，今天小編就把自己平時在項目中用的方法分享給大家，給大家一個參考。
其實小編用的方法也不是什么很高端的技術，算是最low的方法吧，但是很實用，能兼容各種瀏覽器，為了演示，小編直接從某寶商家店鋪里拿了一張商品圖來做演示，因為商品圖都是高清無碼的，且還很大，所以我們在CSS中把圖片的高度設置為200px，div容器的高度為300px，完整的代碼如下：
最終的運行效果如下圖：
可以看到，這個圖片在div中水平、垂直都是在正中間，是不是很完美。這個原理也很簡單，就是在div容器中加了個 <i> 標簽并把它的 display 屬性設置為 inline-block（行內塊元素），讓它去撐開div容器的高度，再把圖片的 vertical-align 屬性設置為 middle 就可以垂直居中了，當然這只是個演示，大家在實際的項目中可以利用 max-width、min-width、max-height、min-height 等屬性讓圖片根據需要自適應，以達到想要的效果。
當然解決方法還有很多種，具體用什么方法需根據自身頁面布局去權衡，總之沒有最好的，只有最適合的，如果你有更好的方法也可以告訴小編哦，一起交流方法，共同進步。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
