元素的垂直水平居中的三种方法

使用padding来挤

当父元素，子元素的盒子大小已经确定了。可以通过计算来，设置padding的值来填充，使子元素居中。
如果是正常盒子，那么增加paddig会改变盒子的大小
如果是怪异盒子，那么增加padding会向里面挤，不会改变盒子的大小。

使用定位来设置

可以将子元素垂直水平居中

    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

原理为：left+right+width+padding+margin=包含块的宽度，当前面四个值确定之后，margin会自动将其余的部分平分从而达到居中的效果。

第三种方法

//父元素的50%
    left:50%;
    top:50%;
    margin-left:自身宽度的一半 ;
    margin-top:自身高度的一半;

先设置父元素的50%,然后在将移动多的位置，移回去。