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>
实现img位于外层div的居中显示，网上有很多在img外层嵌各式各样的span、div、li等等，以便于使用 text-align来进行居中，不推荐嵌套多层的方式。
方法一（推荐）：
1 .demo{2 ????display:table-cell; text-align:center; vertical-align:middle;3 }4 .demo img{5 ????vertical-align: middle;6 }思路：table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签，使用它可以让大小不固定元素垂直居中。
方法二（推荐用于webapp）：
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,低版本浏览器存在一定兼容问题
由于知道父级元素和子级元素的长和宽，可以通过margin ，padding 计算写出：
方法三：
1 .demo img{2 ????display: block;3 ????margin:150px auto;4 }思路：<img>标签是属于内联元素，内联元素是不支持 Margin 属性，通过 Display 属性将img强制为块元素的方式显示,便可在图文混排中使得图片可以居中。
方法四：
1 .demo img{2 ????padding:150px 200px;3 }方法五：
1 .demo{2 ????position: relative;3 }4 .demo img{5 ????position: absolute;top:150px;left:200px;6 }通过纯css实现图片居中的多种实现方式
原文地址：http://www.cnblogs.com/lina-xiao/p/7788010.html