方法1/父元素
father{
position:relative;
}
child{
position:absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
方法2/父元素
father{
position:relative;
}
child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}
方法3/父元素
father{
display:flex;
display: -webkit-flex;
align-items:center;
}
child{
display:flex;/*Flex布局*/
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
align-items:center;
}
father{
position:relative;
}
child{
position:absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
方法2/父元素
father{
position:relative;
}
child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
}
方法3/父元素
father{
display:flex;
display: -webkit-flex;
align-items:center;
}
child{
display:flex;/*Flex布局*/
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
align-items:center;
}