第一种:display:flex
<div className="parent">
<div className="child"></div>
</div>
.parent{
height:100%;
border:1px solid green;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid green;
.child{
height: 100px;
width: 100px;
background: chocolate;
}
}
第二种:position
.parent {
height: 100%;
position: relative;
border: 1px solid green;
.child{
height: 100px;
width: 100px;
background: chocolate;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin:auto
}
}
第三种:transform
.parent {
height: 100%;
position: relative;
border: 1px solid green;
.child{
height: 100px;
width: 100px;
background: chocolate;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}