前提是父元素和子元素已经设置了宽高
flex
###
#father{
width:100%;
height:400px;
display: flex;
justify-content:center;
align-items:center;
background-color: #00a0dc;
}
#son{
width:200px;
height:300px;
background-color: #dc65d2;
}
flex_margin
###
#father{
width:100%;
height:400px;
display: flex;
background-color: #00a0dc;
}
#son{
width:200px;
height:300px;
margin:auto;
background-color: #dc65d2;
}
margin
###
#father{
width:100%;
height:400px;
background-color: #00a0dc;
position: relative;
}
#son{
position: absolute;
width:200px;
height:300px;
background-color: #dc65d2;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
transform
###
#father{
width:100%;
height:400px;
background-color: #00a0dc;
position: relative;
}
#son{
width:200px;
height:300px;
background-color: #dc65d2;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}