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實現圖片居中的多種實現方式