CSS图片水平垂直居中

1. 给要居中的图片增加一个兄弟元素，空白标签span,目的是通过一个空白标签span做参照，拉回图片上下居中；

<div class="outDiv">
    <img src="" />
    <span></span>
</div>

.outDiv{
    text-align:center;
}
.outDiv img{
    vertical-align: middle;
}
.outDiv span{
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

2. 绝对定位实现图片垂直居中

<div class="outDiv">
    <img src="" />
</div>

.outDiv{
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px solid #000;
}
.outDiv img{
    width: 60px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -30px;
    margin-top: -20px;
}

3. 利用transform来实现 

       将上边的例子的margin-left和margin-top替换写成transform: translate(-50%, -50%)

4. 暴力解决水平垂直居中

<div class="outDiv">
    <img src="" />
</div>

.outDiv{
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px solid #000;
}
.outDiv img{
    width: 60px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto; 
}

5.弹性布局

<div class="outDiv">
    <img src="" />
</div>

.outDiv{
    width: 100px;
    height: 100px;
    position: relative;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.outDiv img{
    width: 60px;
    height: 40px;
}