元素在页面内上下居中的4种方法

1.行内元素使用line-height等于行高;

2.有设定宽高的元素

.box{
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    }

3.不定宽高的元素：

.box{
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform : translate(-50%,-50%);
    }

4.利用css3弹性盒子来定位：

//在父容器定义子元素的水平垂直定位，弹性盒子也有子元素单独定位的方法
display : -webkit-flex;    //flex弹性盒子布局
justify-content : center; //定义子元素水平居中
align-items : center;    //定义子元素垂直居中

5.table

display: table-cell;
vertical-align: middle;
text-align: center;