display:table-cell 与 vertical-align:middle结合使用，使容器内容垂直居中

以下方法如果不起作用，因为img的父级用了float属性。

performance：

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

solve方案1：

 

performance:

brief summary:

1.  vertical-align 只对table-cell（可以设置宽高 的行内元素）的元素有效，及类似table-cell的元素，如：input  button radio checkbox  

2. display:inline-block 约等于table-cell

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

                                          第二部分：图片垂直居中的3种常用方法

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

html:

             

               

这里还可以放p。。。。ETC

第一种：img的父级用float，则无效

.parent{
    display:table-cell;
    vertical-align:middle;
}
.parent .img{
  /*display:block inline-block都可以的*/
}

第二种：不受img的父级float影响

.parent{
    position:relative;
}
.parent .img{
  /* translate %是依自身做基数*/
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}

第三种：不受img的父级float影响

.parent{
    display:flex;
    justify-content:center;
    align-items:center;
}
.parent .img{
  /* nothing ^_^*/
}