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;/*用来设置距离父盒子两边的边距*/
}

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