使一個div元素上下左右居中

第一種方法

• 浮動流自我調節

.box{
widht:200px;
height:200px;
position:relative;
}
.box .son{
width:100px;
height:100px;//給定高度和寬度
position:absolute:
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

第二種方法

• flex布局

.div{//父盒子使用flex布局
width:200px;
height:200px;
display:flex;
justify-content:center;
align-item:center;
}

第三種方法

• 絕對定位+translate //在ios微信里面會造成閃退,說明來自張鑫旭[css世界]

.div{
width:200px;
height:200px;
positon:relative;
}
.div .son{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);//這里的50%為自身寬度和高度的50%
}