1、使用margin负值
css部分
.box{
position:relative;
width:600px;
height:400px;
}
.item{
height:100px;
width:100px;
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
html部分:
<body>
<div class='box'>
<div class='item'></div>
</div>
</body>
2、css3位移
css部分:
.box{
position:relative;
width:600px;
height:400px;
}
.item{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
3、flex布局
.box{
display:flex;
justify-content:center;
align-items:center;
}
4、定位+margin
.box{
position:relative;
width:600px;
height:400px;
}
.item{
height:100px;
width:100px;
position:absolute;
top:50%;
left:50%;
bottom:0;
right:0;
margin:auto;
}