div居中方式

  1  写出两种居中方式（垂直和水平都居中）  父元素设置 position：relative

1设置成块元素 text-align: center; margin： position：absolute left:0 right：0 top：0 bottom：0
绝对定位 position
.div{
text-align:center;
width:200px;
height:200px;
margin:auto;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
}
2 （不知道宽高）
.div{
text-align:center;
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}
3 (已经知道宽高)
.div{
text-align:center;
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
4 flex布局
.div{
width:200px;
height:200px;
display:flex;
justify-content:center; //水平居中
align-items:center //垂直居中
}