图片水平居中与垂直居中

　　在开发中，有时候经常会碰到图片水平居中或垂直居中或者水平、垂直都居中的情况，虽然知道怎么用，但是也只是局限于某一种，有时候也需要调试好一会儿才能解决，因此看了一下关于这方面的知识点，来总结一下。以代码来说事儿。

　　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、至于水平垂直都居中那就好说了，将上面垂直、水平居中的方法结合一下就行了。