css图片居中，通过纯css实现图片居中的多种实现方法

在网页布局中，图文排版是我们常用的，那么经常会遇到如何让图片居中显示呢，这篇文章将总结常用css实现图片居中的方法总结：

html结构:

1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd">
2     <img src="default.jpg" width="400" height="300"/>
3 </div>

办公资源网址导航 https://www.wode007.com

实现img位于外层div的居中显示，网上有很多在img外层嵌各式各样的span、div、li等等，以便于使用 text-align来进行居中，当然我们不推荐嵌套多层。

方法一：

1 .demo img{
2     display: block;
3     margin:150px auto;
4 }

思路：<img>标签是属于内联元素，内联元素是不支持 Margin 属性，通过 Display 属性将img强制为块元素的方式显示,便可在图文混排中使得图片可以居中。  

方法二：

1 .demo{
2     text-align: center;
3 }
4 .demo img{
5     margin-top:150px;
6 }

思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。  

方法三：

1 .demo img{
2     padding:150px 200px;
3 }

思路： 只用padding属性，通过计算求得居中

 方式四：

1 .demo{
2     display:table-cell; text-align:center; vertical-align:middle;
3 }
4 .demo img{
5     vertical-align: middle;
6 }

思路：table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签，使用它可以让大小不固定元素垂直居中。只是它比上面方法优势。

方法五：

1 .demo{
2     position: relative;
3 }
4 .demo img{
5     position: absolute;top:150px;left:200px;
6 }

思路：通过相对，绝对定义，计算偏移量实现居中

方法六：

1 .demo{
2     display: -webkit-flex;
3     display: flex;
4     -webkit-align-items: center;
5     align-items: center;
6     -webkit-justify-content: center;
7     justify-content: center;
8 }

思路：实现css6的flex属性，很简单的实现了居中显示，但是推荐使用于web App,低版本浏览器存在一定兼容问题，好处和方法五一样。