图片水平、垂直居中

一、图片的水平垂直居中：

1、水平居中：

1）、给img设display:inline-block;然后父级text-align：center；

2）、给img设display:block; 同时设margin: 0 auto;

2、垂直居中：

解法1：img父级display:table-cell; vertical:middle; height:xxx; （推荐）

<style>
div{display: table-cell;width:400px;height:300px;vertical-align: middle;text-align:center;background:#999;} /*table-cell 可以使替换元素垂直居中，强大！*/
</style>

解法2：定位 + transform: translate(-50%,-50%);【不推荐】

<style>
div{position:relative;width:400px;height:300px;text-align:center;background:#999;}
img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
</style>

另：当已知图片大小时也可以把translate换成margin负值，这里不推荐使用。

解法3：定位 + margin：auto；

<style>
div{position:relative;width:400px;height:300px;text-align:center;background:#999;}
img{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style>

解法4：父级display：table; + 包裹img的元素()设为display：table-cell;

<style>
div{display:table;width:400px;height:300px;text-align:center;background:#999;}
span{display:table-cell;vertical-align:middle;}
</style>

解法5：父级line-height == height + vertical-align:middle （推荐）【已测ok】

<style>
img{border:0;}
div{width:500px;height:300px;line-height:300px;background:#999;text-align:center;}
img{vertical-align:middle;}
</style>

解法6：background实现

div{
　　width:500px;
   height:300px;
   background:#999 url(/i/eg_tulip.jpg) no-repeat center center;
}
<div>