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

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