css三种水平和垂直同时居中的方法介绍

第一种方法：绝对定位+外边距负值

.father{
    position:relative;
}
.son{
    height:300px;
    width:400px;
    position:abosolute;
    left:50%;
    top:50%;
    margin-top:-150px;/*负自身高度的一半*/
    margin-bottom:-200px/*负自身宽度的一半*/;
}

这种方法的优点是兼容问题不大，缺点是子盒子宽高必须是已知的，如果子盒子的宽高不一定，则需要使用js动态的设置margin-top和margin-bottom;

第二种方法：绝对定位+css3位移变换；

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

这种方法的优点是不用考虑子盒子的宽高不一定问题，缺点是ie9以下不兼容；

第三种方法：

.father{
    display: table;
    width: 500px;
    height: 300px;     
}
.son{
    display:table-cell;
    vertical-align:middle;
    padding:20px;/*用来设置距离父盒子两边的边距*/
}

这种方法的优点是兼容性很好且不用考虑子盒子的宽高问题，缺点是子盒子的宽高实际上始终等于父盒子的宽高，只能用于子盒子里面的文本来相对父盒子水平垂直居中,不能实现子盒子相对父盒子的居中，且不能很好的限制文本的行数；