本篇文章接上篇，继续接受css的居中实现方式。该文介绍图片的居中(水平居中和垂直居中)。

一、css图片水平居中

1、利用margin: 0 auto实现图片水平居中

利用margin: 0 auto实现图片居中就是在图片父元素加个text-align: center; 图片上加个css样式margin: 0 auto 如下：

<div style="text-align: center; width: 500px; border: green solid 1px;">

    <img alt="" src="xx" style="margin: 0 auto;" />

</div>

2、利用文本的水平居中属性text-align: center代码如下:

<div style="text-align: center; width: 500px; border: green solid 1px;">

    <img alt="" src="xx" style="display: inline-block;" />

</div>

二、css图片垂直居中

1、利用高==行高实现图片垂直居中

这种方法是要知道高度才可以使用，代码如下：

<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">

   <img alt="" src="xx" style="display: inline-block; vertical-align: middle;" />

</div>

2、利用table实现图片垂直居中

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

这里使用display: table;和display: table-cell;来模拟table，图片设置vertical-align: middle;margin:auto;display: inline-block;或者这种方法并不兼容IE6/IE7，IE67不支持display: table，如果你不需要支持IE67那就可以用。

缺点：当你设置了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; text-align:center;"><img alt="" src="xx" style="display: inline-block;/*vertical-align: middle;margin:auto;*/" /></span>

</div>

3、利用绝对定位实现图片垂直居中

如果已知图片的宽度和高度可以这样，代码如下：

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">

    <img alt="" src="xx" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />

</div>

如果图片的宽度和高度不知道可以这样，代码如下：

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">

    <img alt="" src="xx" style="max-width:100%; max-height:100%;position: absolute; left:50%; top: 50%; transform:translate(-50%,-50%);" />

</div>

另外一种方法可以这样，代码如下：

<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">

    <img alt="" src="xx" style="max-width:100%; max-height:100%;position: absolute; left:0;bottom:0;right:0;top:0;margin:auto" />

</div>

4、移动端可以利用flex布局实现css图片垂直居中

这种方法img父元素设置为display:flex;justify-content:center;align-items:center;，代码如下：

<div style="width: 500px;height:200px; display:flex;justify-content:center;align-items:center;">

    <img alt="" src="xx"  style="max-width:100%; max-height:100%;"/>

</div>