在網頁布局中，圖文排版是我們常用的，那么經常會遇到如何讓圖片居中顯示呢，這篇文章將總結常用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,低版本瀏覽器存在一定兼容問題，好處和方法五一樣。