css垂直水平居中經常使用方法

方法一：已知子元素具體寬高+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;
}

css垂直水平居中經常使用方法代碼示例

歡迎掃描二維碼關注公衆號，一塊兒學習一塊兒進步