图片水平居中与垂直居中

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

　　html主要代码：

?

1 2 3

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

　　css代码：

?

1 2 3 4 5 6 7 8 9 10

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

　　1、图片水平居中。

　　这里有一下几种方法可以实现。

　　（1）、将img标签变成块元素，然后使用margin:0 auto;即可实现。其他不变，那么此时img的样式为：

?

1 2 3 4 5

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

　　

　　（2）、其实跟第一种差不多，就是将img标签一个相对定位（relative）或者绝对定位（absolute），然后left值为50%，然后使用margin-left值为负的图片的宽度的一半就行，代码为

?

1 2 3 4 5 6

img{     width:200px;     position: absolute;     left:50%;     margin-left:-100px;  // 该值为图片宽度的一半 }

　　

　　（3）、使用相对定位（relative）或者绝对定位（absolute），然后left值为50%，然后使用css3transform里的translate来实现（虽然在兼容性方面有些小问题）。

?

1 2 3 4 5 6

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

　　

　　2、图片垂直居中

　　（1）、这里其实上面实现图片水平居中的第三种方法是一样的，只不过是将left换为了top，水平方向移动换成了垂直方向移动而已。

?

1 2 3 4 5 6

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

　　（2）、使用css伪类选择器 :before与vertical-align 来实现，代码为：

?

1 2 3 4 5 6 7 8 9 10

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

　　（3）、第三种方法就是已知图片的高度，然后使用top:50%和设置margin-top值为负的图片高度的一半。

 

　　3、至于水平垂直都居中那就好说了，将上面垂直、水平居中的方法结合一下就行了。