1. 使用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;}

解释：

• 为了用flex实现垂直居中，我们首先要创建一个包裹着图片的div元素，然后给它定义一些基础属性。
• div元素的display属性设置为flex。
• div添加另外一条属性 align-items: center;

2. 利用 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}

解释：

• 首先我们先要创建一个div元素以及另外一个包含图片的div元素，然后我们开始设置它的样式。
• 给img父元素设置display属性为table
• 把包裹图片的那个div元素的display属性设置为table-cell
• 为了实现垂直居中，我们现在要做的就是给包裹图片的div元素设置 vertical-align: middle; 属性

注意： 如果你也想实现水平居中，你可以给最外层的div元素添加 text-align: center 属性，注意不是 id="img" 的div

3. 用绝对定位实现垂直居中（推荐-兼容性好）

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;}

解释：

• 一张包裹在div中的img图片，我们给不光给图片以及div元素定义了尺寸，还给div元素定义了#fff的背景色(背景颜色可以根据需求设置)。
• 给img的父元素添加相对定位属性（position: relative），同时，要给子元素也就是图片img元素添加绝对定位属性（position: absolute）。
• 将图片元素的top属性设置为50%。
• 现在我们需要给img元素设置一个负的margin-top值，这个值为你想要实现垂直居中的元素高度的一半，*如果不确定元素的高度，可以不使用margin-top，而是使用 transform:translateY(-50%); 属性。

记住： 如果你想要同时实现水平居中，那么你可以用实现垂直居中的一样的技巧来实现。