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 //垂直居中
}

你可能感兴趣的:(css)