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垂直水平居中常用方法代码示例

欢迎扫描二维码关注公众号，一起学习一起进步