您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > div+css圖片居中(水平居中和垂直居中)的設(shè)置方法

div+css圖片居中(水平居中和垂直居中)的設(shè)置方法

文章來源：365jz.com 點擊數(shù)：607 更新時間：2018-01-09 11:05 參與評論

css圖片水平居中

利用margin: 0 auto實現(xiàn)圖片水平居中

利用margin: 0 auto實現(xiàn)圖片居中就是在圖片上加上css樣式margin: 0 auto 如下：

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="margin: 0 auto;" />
</div>

利用文本的水平居中屬性text-align: center

代碼如下:

<div style="text-align: center; width: 500px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" />
</div>

css圖片垂直居中

利用高==行高實現(xiàn)圖片垂直居中

這種方法是要知道高度才可以使用，代碼如下：

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" />
</div>

利用table實現(xiàn)圖片垂直居中

利用table的方法是利用了table的垂直居中屬性，代碼如下：

這里使用display: table;和display: table-cell;來模擬table，這種方法并不兼容IE6/IE7，IE67不支持display: table，如果你不需要支持IE67那就可以用

缺點：當(dāng)你設(shè)置了display: table;可能會改變你的原有布局

<div style="text-align: center; width: 500px;height:200px; display: table;border: green solid 1px;">
<span style="display: table-cell; vertical-align: middle; "><img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block;" /></span>
</div>

利用絕對定位實現(xiàn)圖片垂直居中

如果已知圖片的寬度和高度可以這樣，代碼如下：

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />
</div>

移動端可以利用flex布局實現(xiàn)css圖片垂直居中

移動端一般瀏覽器版本都比較高，所以可以大膽的使用flex布局，（flex布局參考css3的flex布局用法）演示代碼如下：

css代碼：

<style type="text/css">
/*web前端開發(fā)http://www.51xuediannao.com/*/
        .ui-flex {
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: -ms-flexbox !important;
            display: flex !important;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap
        }

        .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
            box-sizing: border-box
        }

        .ui-flex.justify-center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }
        .ui-flex.center {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center
        }
    </style>

html代碼：

<div class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;">
<div class="cell">
<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="" />
</div>
</div>

圖片水平垂直居中存在的問題

所謂的圖片水平垂直居中就是把圖片放在一個容器元素中（容器大于圖片尺寸或是指定了大小的容器），并且圖片位居此容器正中間（中間是指元素容器的正中間），而圖片不是以背景圖片（background-image）形式展示，是以<img>元素形式展示的。如下圖所示：

大家都知道，如果其中img有明確的尺寸，并且圖片尺寸都是一致的，要實現(xiàn)其水平垂直居中一件非常容易的事情，我們只要像下面操作就能方便解決問題：

將圖片以塊元素方式顯示(display:block)；
給圖片指定明確的margin-left和margin-top值，而其中margin-left值等于圖片所在容器的寬度(imbBoxWidth)減去圖片本身寬度(imgWidth)的值的一半【margin-left=(imgBoxWidth-imgWidth)/2】;margin-top值和margin-left很類似，只是把相對應(yīng)的寬度值換成高度值,即【margin-top=(imgBoxHeight-imgHeight)/2】。

上面的方法是方便簡單，但受限太大，比如說圖片不一樣時，用上面的方法實現(xiàn)就比較難，或許你會說給相圖尺寸的圖片定義一個類，然后在給他們指定不同的margin。但有很多情況下我們是無法使用這種方法來解決圖片水平垂直居中的問題，比如說有很多不同尺寸的圖片，而且圖片容器的單位和圖片大小單位不一致時，這樣我們就沒有辦法能計算出圖片與容器之間的margin是多少，此時解決圖片水平居垂直居中就相當(dāng)?shù)睦щy。換過來說，如果有什么辦法能讓不同尺寸的圖片實現(xiàn)水平垂直居中，那對于我們來說是多么有用的，又是多么方便的一件事。

解決問題——讓圖片水平垂直居中

解決水平居中是相當(dāng)?shù)娜菀?，如果圖片左浮動并且"display:inline"時，我們只要給圖片設(shè)置一個"text-align:center"屬性，就順利解決了水平居中。

對于垂直居中的最佳解決方案，在現(xiàn)代瀏覽器中，我們可以給圖片容器設(shè)置“dipslay:table-cell;vertical-align:middle”, 這種方法能順利的讓圖片實現(xiàn)垂直居中，但只能在現(xiàn)代瀏覽器運行，在IE6-7中無法正常運。這樣一來是不是將無法實現(xiàn)呢？大家別急，我們一起來看下面的幾種方法：

1、table-cell加上display:inline

這種方法很神奇，前面我們說過用display-table和vertical-middle是在現(xiàn)代瀏覽器中實現(xiàn)圖片垂直居中是最佳辦法，只是IE6-7不支持display:table-cell，其實并不是那么嚴(yán)重，我們只要在IE6-7下給他來個另外的寫法。其實掌握了原理在IE下實現(xiàn)起來也并不難，下面我們一起先來看看這個思路：

首先在圖片的容器元素中設(shè)置“display:table-cell;vertical-align:middle;”實現(xiàn)現(xiàn)瀏覽器的垂直居中；
IE6-7有一個好的辦法，就是創(chuàng)建一個線盒，此線盒的高度和圖片容器的高度一樣，并且給這個線盒也設(shè)置“vertical-align:middle”。

接下來的關(guān)鍵是給IE6-7創(chuàng)建線盒，還好IE6-7下部分顯示支持“dipslay:inline-block”。這樣我們就可以在圖片的容器中創(chuàng)建一個空元素（比如說span），并且設(shè)置span的“display:inline-block;height:100%;vertical-align:middle”。

創(chuàng)建線盒中有一個細(xì)節(jié)需要注意，在IE6-7中空的line-block元素寬度為“0”，這樣在IE6-7下是沒有效果的，此時我們需要給span加上“width:1px”，此時會給水平居中造成1px的誤差，但這種bug你是可以接受得了的。

那么最終解決方案就是使用display:table-cell和設(shè)置了display:inline-block的線合span。當(dāng)然其中還是需要為IE寫一點特殊的代碼，接下來我們的起來看代碼：

HTML Markup

<ul class="imgWrap clearfix">
    <li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>
    <li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>
    <li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>
    <li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li> 
</ul>

CSS Code

<style type="text/css">
    .imgWrap li {
     float: left;
     border: solid 1px #666;
     margin: 10px 10px 0 0;
     list-style: none;
     border-collapse: collapse;
    }
    .imgWrap a {
     background: #ffa url(images/gridBg.gif) repeat center;
     width: 219px;
     height: 219px;
     display: table-cell;/*圖片容器以表格的單元格形式顯示*/
     text-align: center; /* 實現(xiàn)水平居中 */
     vertical-align: middle; /*實現(xiàn)垂直居中*/    
    }
    .imgWrap a:hover {
     background-color: #dfd;
    }
    .imgWrap img {
     border: solid 1px #66f;
     vertical-align: middle; /*圖片垂直居中*/
    }
    </style>
    <!--下面是解決IE6-7的正常顯示的代碼-->
    <!--[if lt IE 8]>
     <style type="text/css">
     .imgWrap a {
      display: block;
     }
     .imgWrap span {
      display: inline-block;
      vertical-align: middle;
      height: 100%;
     }
     .imgWrap {
      _height: 0;
      zoom: 1;
     }
</style>
    <![endif]-->

2、空白標(biāo)簽實現(xiàn)圖片的垂直居中

這種方法很有意思，也很有獨特之處，主要使用了一張寬度為1px高度為100％的透明圖片，并設(shè)置圖片“vertical-align:middle”。后來我想了想，此處能不能不使用圖片，直接像上面的實例一樣，用一個空格的span標(biāo)簽，只是將其“display:inline”設(shè)置為“display:inline-block”。因為這兩者的核心原理都是一致的：我將span行內(nèi)元素設(shè)置為行內(nèi)塊元素，也就是將其display設(shè)置為“inline-block”，將其寬度定位1px，height為容器的100%，這樣高度可以和容器的高度達(dá)到一樣，然后通過“vertical-align:middle”設(shè)置垂直對齊，從而實現(xiàn)所需要的效果。下面一起看看這種方法吧。

HTML Markup

<ul class="imgWrap clearfix">
    <li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>
    <li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>
    <li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>
    <li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>
</ul>

CSS Code

<style type="text/css">
.imgWrap li{
     width: 219px;
     height: 219px;
     float: left;
     border: solid 1px #666;
     margin: 10px 10px 0 0;
     list-style: none;
     text-align: center;
     font-size: 0;
    }

.imgWrap a {
     display: block;
     height: 100%;
     background: #ffa url(images/gridBg.gif) repeat center;
    }
.imgWrap a:hover {
     background-color: green;
    }
.imgWrap span {
     display: inline-block;/*將行內(nèi)元素改變?yōu)樾袃?nèi)塊元素顯示*/
     width: 1px;/*實現(xiàn)ＩＥ下可讀效果*/
     height: 100%;/*使用元素高度和圖片容器高度一樣*/
     vertical-align: middle;/*垂直對齊*/
    }

.imgWrap img {
     vertical-align: middle;
    }
</style>

3、display:table模擬表格實現(xiàn)圖片垂直居中

接下來要說的這種方法是結(jié)構(gòu)有點復(fù)雜，而且在IE6-7事要配合hack來產(chǎn)現(xiàn)。這個方法就是模擬表格的形式來實現(xiàn)圖片垂直居中的效果。

表格大家都知道，他有行（table-row）單元格（table-cell），眾所周知，表格單元格中“vertical-align: middle”能讓元素垂直居中，那么下面這個實例就是利用這種原理來制作的，一起來看代碼

HTML Markup

<ul class="imgWrap clearfix">
    <li>
     <div class="table">
      <div class="tableCell">
       <a href="#" class="imgBox"><img src="images/img1.jpg" alt="" /></a>
      </div>
     </div>
    </li>
    <li>
     <div class="table">
      <div class="tableCell">
       <a href="#" class="imgBox"><img src="images/img2.jpg" alt="" /></a>
      </div>
     </div>
    </li>
    <li>
     <div class="table">
      <div class="tableCell">
       <a href="#" class="imgBox"><img src="images/img3.jpg" alt="" /></a>
      </div>
     </div>
    </li>
    <li>
     <div class="table">
      <div class="tableCell">
       <a href="#" class="imgBox"><img src="images/img4.jpg" alt="" /></a>
      </div>
     </div>
    </li>
</ul>

CSS Code

.imgWrap li {
    background: #ffa url(images/gridBg.gif) repeat center;
    width: 219px;
    height: 219px;
    float: left;
    border: solid 1px #666;
    margin: 10px 10px 0 0;
    list-style: none;
    text-align: center;
   }
.table {
    width: 100%;
    height: 100%;
    display: table;
    position: relative;
   } 

.tableCell {   
    display: table-cell;
    vertical-align: middle;
    text-align: center;  
    padding: 10px;
    *position: absolute;
    *top: 50%;
    *left: 50%;
   }
.imgWrap a {
    display: block;
    *position:relative;
    *top: -50%;
    *left: -50%;
   }

4、jQuery方法實現(xiàn)圖片居中

這個方法很簡單，就是得用jQuery方法，將圖片轉(zhuǎn)換為其父元素的背景圖片，并且在其父元素中居中顯示背景圖片，然后在將其自身的透明度設(shè)置為“0”，這樣也能達(dá)到圖片居中的效果。

Html Markup

<ul class="imgWrap clearfix">

    <li><a href="#" class="imgBox"><img src="images/img1.jpg" alt="" /></a></li>

    <li><a href="#" class="imgBox"><img src="images/img2.jpg" alt="" /></a></li>

    <li><a href="#" class="imgBox"><img src="images/img3.jpg" alt="" /></a></li>

    <li><a href="#" class="imgBox"><img src="images/img4.jpg" alt="" /></a></li>


</ul>

CSS Code

.imgWrap li {
    float: left;
    border: solid 1px #666;
    margin: 10px 10px 0 0;
    list-style: none;
    background: #ffa url(images/gridBg.gif) repeat center;
   }
.imgWrap a {
    width: 219px;
    height: 219px;
    display: block;
   }

jQuery Code

//先寫一個小插件
   $.fn.imgVAlign=function(){
    return $(this).each(function(i){
     //獲取圖片的src值，并定義給變量bg
     var bg = $(this).attr("src");
     //給圖片的父元素定義背景圖片的樣式，并且背景圖片
     $(this).parent().css({"background": "url("+ bg +") no-repeat center center"
     });
     //將圖片隱藏
     $(this).css("opacity","0");
    });
   }
   //調(diào)用上面寫的插件
   $(document).ready(function(){
    $(".imgBox img").imgVAlign();
   });

如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答！！點擊進(jìn)入論壇

您可能感興趣的文章:

發(fā)表評論 (607人查看，0條評論): 請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴(yán)禁發(fā)布色情、暴力、反動的言論。

昵稱：

最新評論

------分隔線----------------------------

大家感興趣的內(nèi)容

最近更新的內(nèi)容

9
什么是ipc

10
epic是什么平臺

五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

div+css圖片居中(水平居中和垂直居中)的設(shè)置方法

圖片水平垂直居中存在的問題

解決問題——讓圖片水平垂直居中

3、display:table模擬表格實現(xiàn)圖片垂直居中

4、jQuery方法實現(xiàn)圖片居中

您可能感興趣的文章:

公司信息

快速入口

其它欄目

業(yè)務(wù)咨詢

五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

div+css圖片居中(水平居中和垂直居中)的設(shè)置方法

圖片水平垂直居中存在的問題

解決問題——讓圖片水平垂直居中

3、display:table模擬表格實現(xiàn)圖片垂直居中

4、jQuery方法實現(xiàn)圖片居中

您可能感興趣的文章:

公司信息

快速入口

其它欄目

業(yè)務(wù)咨詢

4、jQuery方法實現(xiàn)圖片居中