JS實現(xiàn)圖片垂直居中顯示小結(jié)
更新時間：2016年12月13日 09:10:12 作者：云悠
本文給大家分享了4中圖片垂直居中顯示的效果，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
第1種，居中效果
<div class="box"> <div class="center">居中效果</div> </div>
/*第1種，垂直居中效果*/
.box{
width: 200px;height: 200px;border: 1px solid #ccc;
position: relative;
}
.center{
width: 100px;height: 100px;background: gray;
margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;
}
第2種 圖片居中
<div class="box2"> <img class="center2" src="yz_p5.jpeg" alt=""/> <span class="block"></span> </div>
/*第2種 圖片垂直居中*/
/* span是輔助元素 vertical-align這個屬性的特點,它是相對兄弟級行高（line-height）來定位*/
.box2{
width: 350px;height: 350px;border: 1px solid #F22727;
text-align: center;
}
.center2{ vertical-align: middle;}
.block{ line-height: 350px;}/*跟父級一樣高*/
第3種，居中效果 父元素使用display: table; 子元素display: table-cell;
<div class="box3"> <span class="center3"><img src="yz_p5.jpeg" alt=""/></span> </div>
/*第3種，居中效果*/
.box3{
width: 350px;height: 350px;border: 1px solid #F22727;display: table;text-align: center;
}
.center3{
display: table-cell;vertical-align: middle;
}
第4種，居中效果
<div class="box4"> <img class="center4" src="yz_p5.jpeg" alt=""/> </div>
/*第4種，居中效果 根據(jù)父元素來計算*/
.box4{
width:300px;height: 300px;border: 1px solid #F22727;
}
.center4{
width: 200px;height: 200px;position: relative;left: 16%;top: 19%;
}
以上所述是小編給大家介紹的JS實現(xiàn)圖片垂直居中顯示小結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)新浪微博效果帶遮罩層的彈出框代碼,涉及JavaScript響應鼠標事件動態(tài)操作頁面元素的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
JavaScript實現(xiàn)彈出子窗口并傳值給父窗口
這篇文章主要介紹了JavaScript實現(xiàn)彈出子窗口并傳值給父窗口,方法很簡單，這里推薦給大家，需要的朋友可以參考下2014-12-12
js實現(xiàn)倒計時(距離結(jié)束還有)示例代碼
本文與大家分享個js實現(xiàn)倒計時的代碼，主要實現(xiàn)功能距離結(jié)束還有多少時間，感興趣的朋友可以參考下，希望對大家學習js有所幫助2013-07-07
一篇文章搞定JavaScript類型轉(zhuǎn)換(面試常見)
這篇文章主要介紹了一篇文章搞定JavaScript類型轉(zhuǎn)換(面試常見)，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
這篇文章主要介紹了淺談JS中幾種輕松處理'this'指向方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
asp作為主頁面，外接一個js的，我想知道一下能否在js里面調(diào)用asp的變量值，如果能這些值是怎么傳遞過去的呢？本文將提供解決方法，需要的朋友可以參考下2012-12-12
特想搞點新的創(chuàng)意出來-立體方塊...2007-06-06
JS?中的URLSearchParams?對象操作(以對象的形式上傳參數(shù)到url)
這篇文章主要介紹了JS中URLSearchParams的基本用法，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了詳細討論JavaScript中的求值策略，對求值策略感興趣的同學，可以參考下2021-04-04
JS實現(xiàn)頁面超時后自動跳轉(zhuǎn)到登陸頁面
這篇文章主要介紹了JS實現(xiàn)頁面超時后自動跳轉(zhuǎn)到登陸頁面,需要的朋友可以參考下2015-01-01