圖片水平居中與垂直居中

　　在開發中，有時候經常會碰到圖片水平居中或垂直居中或者水平、垂直都居中的情況，雖然知道怎么用，但是也只是局限於某一種，有時候也需要調試好一會兒才能解決，因此看了一下關於這方面的知識點，來總結一下。以代碼來說事兒。

　　html主要代碼：

<div class="container">
    <img src="http://placeholder.qiniudn.com/190x284" alt="">
</div>

　　css代碼：

<style>
    .container{
      width:500px;
      height:400px;
      border:1px solid #eee;
    }
    img{
      width:200px;
    }
</style>

　　1、圖片水平居中。

　　這里有一下幾種方法可以實現。

　　（1）、將img標簽變成塊元素，然后使用margin:0 auto;即可實現。其他不變，那么此時img的樣式為：

img{
   display:block;
   width:200px;
   margin:0 auto;
}

　　

　　（2）、其實跟第一種差不多，就是將img標簽一個相對定位（relative）或者絕對定位（absolute），然后left值為50%，然后使用margin-left值為負的圖片的寬度的一半就行，代碼為

img{
    width:200px;
    position: absolute;
    left:50%;
    margin-left:-100px;  // 該值為圖片寬度的一半
}

　　

　　（3）、使用相對定位（relative）或者絕對定位（absolute），然后left值為50%，然后使用css3transform里的translate來實現（雖然在兼容性方面有些小問題）。

img{
    width:200px;
    position: relative;
    left:50%;
    transform:translateX(-50%);
}

　　

　　2、圖片垂直居中

　　（1）、這里其實上面實現圖片水平居中的第三種方法是一樣的，只不過是將left換為了top，水平方向移動換成了垂直方向移動而已。

img{
    width:200px;
    position: relative;
    top:50%;
    transform:translateY(-50%);
}

　　（2）、使用css偽類選擇器 :before與vertical-align 來實現，代碼為：

.container:before{
    content:'';
    display: inline-block;
    height:400px;  // 高度值與包含圖片的容器的高度一致
    vertical-align: middle;
}
img{
    width:200px;
    vertical-align: middle;
}

　　（3）、第三種方法就是已知圖片的高度，然后使用top:50%和設置margin-top值為負的圖片高度的一半。

 

　　3、至於水平垂直都居中那就好說了，將上面垂直、水平居中的方法結合一下就行了。