一、使用transform
.parent{
background: #eee;
width: 600px;
height: 600px;
}
.child{
position: relative;
background: #e4393c;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
二、使用绝对定位position: absolute
.parent{
position: relative;
background: #eee;
width: 600px;
height: 600px;
}
.child{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background: #e4393c;
width: 200px;
height: 200px;
margin: auto;
}
三、flex 弹性布局
.parent{
display: flex;
justify-content: center;
align-items: center;
background: #eee;
width: 600px;
height: 600px;
}
.child{
background: #e4393c;
width: 200px;
height: 200px;
}
三、flex 结合 margin: auto
.parent{
display: flex;
background: #eee;
width: 600px;
height: 600px;
}
.child{
background: #e4393c;
width: 200px;
height: 200px;
margin: auto
}