垂直水平居中总结以及兼容问题

1.子元素绝对定位 + margin

        父元素已知宽高或有宽高

.child{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

  2.  transform

        左边距是父元素的50%    transform 是自身的左边距50%来达到居中

        兼容IE10以上

.child{
    position:relative;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%)
}

    3.flex

        兼容性：ie11以上

.father{
    display:flex;
    justify-content: center;
    aligin-items: center;
}

  4.table-cell

        无兼容问题

.father{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}