圖片垂直水平居中的N種方法
阿新 • • 發佈：2019-01-24
前幾天在網上逛部落格，看到一個關於在div中圖片居中的幾種方法的帖子，當然博主原意不是講這個的，而是再說明css的幾個display屬性的用法以及偽類：after的巧用過程中展示的用例，當然還有意想不到的font-size屬性的用法，個人覺得非常有用，所以就做了一個總結，在一個div容器中讓圖片水平垂直居中有以下N中方法，當然不限於以下方法（以下方法相容IE系列以及W3C瀏覽器）：
<style> *{padding: 0; margin: 0; list-style: none;} /*方案1*/ .bg-box{width: 144px;height: 144px;font-size:118px;border: 1px solid #ddd;float: left;margin-right: 20px;} .bg-box .img-src{background: url(logo.png) no-repeat center center;display: block;width: 100%;height: 100%;} /*方案2*/ .wrap-box{float: left;margin-right: 20px;} .img-box{width: 144px;height: 144px;*font-size:118px;vertical-align:middle;display:table-cell;border: 1px solid #ddd;text-align: center;}/*height:fontSize=1.14*/ .img-box img{vertical-align: middle;} /*方案3*/ .img-box1{width: 144px;height: 144px;font-size:0;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;} .img-box1 .pixel{vertical-align: middle;height: 100%;width: 1px;} .img-box1 .img-src{vertical-align: middle;} /*方案4*/ .img-box2{width: 144px;height: 144px;*font-size:118px;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;} .img-box2:after{content: '';display: inline-block;height: 100%;width: 0;vertical-align: middle;} .img-box2 .img-src{vertical-align: middle;} /*方案5*/ .img-box3{width: 144px;height: 144px;border: 1px solid #ddd;text-align: center;float: left;margin-right: 20px;} .img-divide{width:0;height:100%;display:inline-block;vertical-align:middle;*display:inline;*zoom:1;} .img-box3 .img-src{vertical-align:middle;} </style> </head> <body> <div class="bg-box"> <img src="pixel.png" alt="" class="img-src"> </div> <div class="wrap-box"> <div class="img-box"> <img src="logo.png" alt=""> </div> </div> <div class="img-box1"> <img src="pixel.png" alt="" class="pixel"> <img src="logo.png" alt="" class="img-src"> </div> <div class="img-box2"> <img src="logo.png" alt="" class="img-src"> </div> <div class="img-box3"> <div class="img-divide"></div> <img src="logo.png" class="img-src"> </div> </body>
一下是效果圖：
//無意間又發現一種方法，這裡再補充一下
用line-height就能達到這樣的效果，如下：
.img-box4{width: 144px;height: 144px;border: 1px solid #ddd;text-align: center;line-height:144px;}
.img-box4 .img-src{vertical-align:middle;}說明下，logo.png是效果圖中的圖片，而pixel.png是一張大小隨意的透明圖片，大家可以試試效果！
PS：推薦使用最後一種，省了很多麻煩！