设置div居中显示
设置宽高
方法一：
.container{
position:absolute;
width:500px;
height:500px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#ccc;
}
方法二：
.container{
width:200px;
height:200px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
方法三：
.container{
width:200px;
height:200px;
position:absolute;
background:#ccc;
top:50%;
left:50%;
margin-top:-100px;//设置为宽高的一半
margin-left:-100px;
}
方法四：
width:700px;
heigth:600px;
background:orangen;
display:flex;
aligin-items:center;
justify-content:center;
}
div2{
width:200px;
height:200px;
background:orchild;
}
未设置宽高
方法一：
box{
position:flex;
top:50%;
left:50%;
background:#ccc;
width:50%;
height:50%;
transform:translateX(-50%) tanslateY(-50%);
}
方法二：
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
}
div2{
position:absolute;
top:0;
left:0;
right:0;
width:50%;
height:50%;
margin:auto;
bottom:0;
background:#ccc;
}
