声明：原文来自DIVCSS5，其次原文代码存在一些引起误解的地方，已经进行修改和测试，下文会注明引起误解的地方。主要收藏为方便下次阅读，故进行转发，如有侵权，请私聊本人，定立即删除。原文连接：DIVCSS5_让html img垂直居中的三种办法
让HTML img垂直居中的三种办法：
一、使用flex完成垂直居中
操纵css flex实现垂直居中。flex或许不是完成垂直居中最好的选择，由于IE8,9其实不赞成它。
那时，为了用flex实现垂直居中，我们起首要竖立一个包裹着图片的div元素，日后给它定义一些根基属性。
如下图片img宽度为（设置为）100px，高度为100px。
HTML代码部份：
CSS代码一部分：
.flexbox{
width: 1000px;
height: 1000px;
background: pink;
/* 给父元素添加下面这两个属性，即可让子元素的图片垂直居中，且父元素的 align-items: center 为不可缺少属性*/
display: flex;
align-items: center
}
.flexbox img{
width: 500px;
/* align-items: center 此处并不需要这个属性，多余 */
}
二、操作display: table;完成img图片垂直居中
HTML代码：
CSS代码：
.tablebox{
width: 1000px;
height: 1000px;
background: pink;
/* 给父元素添加display:table属性 */
display: table
}
#imgbox{
/* 给子元素(图片的容器)添加display:table-cell & vertical-align: middle;属性 */
display: table-cell;
vertical-align: middle;
}
#imgbox img{
width: 500px;
}
三、用绝对定位完成垂直居中（举荐-兼容性好）
HTML代码：
CSS代码：
.posdiv{
width: 1000px;
height: 1000px;
background: pink;
margin:0 auto
/* 给父元素添加相对定位，让子元素相对父元素进行偏移 */
position: relative;
}
.posdiv img{
width: 500px;
/* 老生常谈的方法，先让子元素的上边界处于父元素中间线的位置，在让子元素向上偏移自身的50%即可 */
position: absolute;
top: 50%;
transform: translateY(-50%);
/* 此处最好不要有margin-top: -100px; 这样的写法，不具有普遍适用性，假如是一个动态网页，需要从服务器获取资源，图片的大小可能随时会变，这种方法会直接失效，而且通过上外边距来调整位置就是在凑答案，强烈不推荐这种写法。向上移动自身的一半即可*/
}