方法一：已知子元素具體寬高+position
父元素：position:relative;
子元素：position:absolute;top:50%;left:50%;margin-top:-子元素高度一半;margin-left:-子元素寬度一半;
.first{
? ? width:300px;
? ? height:200px;
? ? position:relative;
}
.item1{
? ? width:200px;
? ? height:80px;
? ? position:absolute;
? ? top:50%;
? ? left:50%;
? ? margin-top:-40px;
? ? margin-left:-100px;
}
方法二：未知子元素具體寬高+position+translate
父元素：position:relative;
子元素：position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
.second{
? ? width:300px;
? ? height:200px;
? ? position:relative;
}
.item-2{
? ? width:60%;
? ? height:40%;
? ? position:absolute;
? ? top:50%;
? ? left:50%;
? ? transform:translate(-50%,-50%);
}
方法三：彈性布局
父元素添加以下內容：
display:flex; //彈性布局
align-items: center; //水平居中
justify-content:center; //垂直居中
.third{
? ? width:300px;
? ? height:200px;
? ? display:flex;
? ? justify-content:center;
? ? align-items: center;
}
歡迎掃描二維碼關注公眾號苟耻，一起學習一起進步
