div 垂直居中
html:
<div class="box">
<div></div>
</div>
css:
/* 方法一 */
.box{
width:200px;
height:200px;
background: #ff6699;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
/* 方法二*/
.box{
width:200px;
height: 200px;
background:green;
position: absolute;
margin-left:-100px;
magin-top:-100px;
}
/* 方法三 */
/* 父级容器指定高度 */
.box{
display:flex;
justify-content:center;
align-items:center;
height:600px;
}
.box>div{
width:200px;
height:200px;
background:green;
}
/* 方法四*/
.box{
width:200px;
height:200px;
position:absolute;
background:green;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}