一、使用flex實現(xiàn)垂直居中

利用css flex實現(xiàn)垂直居中。flex可能不是實現(xiàn)垂直居中最好的選擇，因為IE8,9并不支持它。
現(xiàn)在，為了用flex實現(xiàn)垂直居中，我們首先要創(chuàng)建一個包裹著圖片的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實現(xiàn)垂直居中，我們首先要創(chuàng)建一個包裹著圖片的div元素，然后給它定義一些基礎屬性。
2、div元素的display屬性設置為flex。
3、div添加另外一條屬性align-items: center;

二、利用Display: table;實現(xiàn)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、首先我們先要創(chuàng)建一個div元素以及另外一個包含圖片的div元素，然后我們開始設置它的樣式。
2、給img父元素設置display屬性為table
3、把包裹圖片的那個div元素的display屬性設置為table-cell
4、為了實現(xiàn)垂直居中，我們現(xiàn)在要做的就是給包裹圖片的div元素設置vertical-align: middle;屬性
注意：如果你也想實現(xiàn)水平居中，你可以給最外層的div元素添加text-align: center屬性，注意不是id=”img”的div

三、用絕對定位實現(xiàn)垂直居中（推薦-兼容性好）

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的背景色(背景顏色可以根據(jù)需求設置)。
2、給img的父元素添加相對定位屬性（position: relative），同時，要給子元素也就是圖片img元素添加絕對定位屬性（position: absolute）。
3、將圖片元素的top屬性設置為50%。
4、現(xiàn)在我們需要給img元素設置一個負的margin-top值，這個值為你想要實現(xiàn)垂直居中的元素高度的一半，*如果不確定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);屬性。

記住：如果你想要同時實現(xiàn)水平居中，那么你可以用實現(xiàn)垂直居中的一樣的技巧來實現(xiàn)。