块级元素在父元素中实现垂直水平居中

块级元素在父元素中实现水平垂直居中

方法一：
.father{
position: relative;
}
.child{
position: absolute;
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}

方法二:
.father{
position: relative;
}
.child{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
方法三：
//添加以下样式(使用css3定义的新属性 IE10+)

.father{display:flex;}

//将父元素设为弹性容器也可设为display:inline-flex;
//两者的区别是设为inline-flex该元素视为内联元素

.child{margin:auto;}
方法四：
//使用css3定义的新属性 IE10+
.fu{
display:flex;
justify-content: center; //子元素水平方向居中
align-items: center;//子元素垂直方向居中
}
方法五：
//IE10+
.father{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
//使该元素分别向左和上移动宽高一半的距离
}