css圖片垂直居中 讓html img圖片垂直居中的三種方法
本教程為thinkcss教大家三種讓img元素圖片在盒子內垂直居中的方法教程，根據程式碼與文章教程理解掌握並加以使用。
一、使用flex實現垂直居中
利用css flex實現垂直居中。flex可能不是實現垂直居中最好的選擇，因為IE8,9並不支援它。
現在，為了用flex實現垂直居中，我們首先要建立一個包裹著圖片的div元素，然後給它定義一些基礎屬性。
以下圖片img寬度為（設定為）100px，高度為100px。
HTML程式碼部分：
<div class="flexbox">
<img src="1.jpg" alt="">
</div>
CSS程式碼部分：
body{ background:#999}
.flexbox{width: 300px;height: 250px;background:#fff;display: flex;align-items: center}
.flexbox img{width: 100px;height: 100px;align-items: center;}
效果：
瀏覽器執行效果：實現圖片垂直居中佈局
解釋：
1、為了用flex實現垂直居中，我們首先要建立一個包裹著圖片的div元素，然後給它定義一些基礎屬性。
2、div元素的display屬性設定為flex。
3、div新增另外一條屬性align-items: center;
二、利用Display: table;實現img圖片垂直居中
html程式碼：
<div class="tablebox">
<div id="imgbox">
<img src="1.jpg" alt="">
</div>
</div>
CSS程式碼：
.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}
解釋：
1、首先我們先要建立一個div元素以及另外一個包含圖片的div元素，然後我們開始設定它的樣式。
2、給img父元素設定display屬性為table
3、把包裹圖片的那個div元素的display屬性設定為table-cell
4、為了實現垂直居中，我們現在要做的就是給包裹圖片的div元素設定vertical-align: middle;屬性
注意：如果你也想實現水平居中，你可以給最外層的div元素新增text-align: center屬性，注意不是id=”img”的div
三、用絕對定位實現垂直居中（推薦-相容性好）
HTML程式碼：
<div class="posdiv">
<img src="1.jpg" alt="">
</div>
CSS程式碼：
body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}
解釋：
1、一張包裹在div中的img圖片，我們給不光給圖片以及div元素定義了尺寸，還給div元素定義了#fff的背景色(背景顏色可以根據需求設定)。
2、給img的父元素新增相對定位屬性（position: relative），同時，要給子元素也就是圖片img元素新增絕對定位屬性（position: absolute）。
3、將圖片元素的top屬性設定為50%。
4、現在我們需要給img元素設定一個負的margin-top值，這個值為你想要實現垂直居中的元素高度的一半，*如果不確定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);屬性。
記住：如果你想要同時實現水平居中，那麼你可以用實現垂直居中的一樣的技巧來實現。
通過以上三種方法讓img圖片垂直居中，希望大家能掌握佈局方法與原理。