html样式
--------children相对于box水平垂直居中
<div class="box">
<div class="chidren></div>
</div>
css样式
方法一:
.box {
width:500px;
height: 500px;
border:3px solid pink;
position: relative;
}
.children {
width:100px;
height: 100px;
background-color: skyblue;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
方法二:
.box {
width:500px;
height: 500px;
border:3px solid pink;
position: relative;
}
.children {
width:100px;
height: 100px;
background-color: skyblue;
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin: auto;
}
方法三:
.box {
width:500px;
height: 500px;
border:3px solid pink;
display: flex;
align-items: center;
justify-content: center;
}
.children {
width:100px;
height: 100px;
background-color: skyblue;
}
