让HTML img垂直居中的三种办法：

• 声明：原文来自DIVCSS5，其次原文代码存在一些引起误解的地方，已经进行修改和测试，下文会注明引起误解的地方。主要收藏为方便下次阅读，故进行转发，如有侵权，请私聊本人，定立即删除。
• 原文连接：DIVCSS5_让html img垂直居中的三种办法

让HTML img垂直居中的三种办法：

一、使用flex完成垂直居中

操纵css flex实现垂直居中。flex或许不是完成垂直居中最好的选择，由于IE8,9其实不赞成它。

那时，为了用flex实现垂直居中，我们起首要竖立一个包裹着图片的div元素，日后给它定义一些根基属性。

如下图片img宽度为（设置为）100px，高度为100px。

HTML代码部份：

<div class="flexbox">
    <img src="1.jpg" alt="">
</div>

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代码：

<div class="tablebox">
    <!-- 使用table/table-cell的方法一定要将子元素的图片包裹在一个块级元素的容器中  -->
    <div id="imgbox">
        <img src="1.jpg" alt="">
    </div>
</div>

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代码：

<div class="posdiv">
    <img src="1.jpg" alt="">
</div>

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; 这样的写法，不具有普遍适用性，假如是一个动态网页，需要从服务器获取资源，图片的大小可能随时会变，这种方法会直接失效，而且通过上外边距来调整位置就是在凑答案，强烈不推荐这种写法。向上移动自身的一半即可*/
}