CSS不定宽高垂直水平居中的方法

目录

一、使用子绝父相实现垂直居中

二、使用margin+transform来实现垂直居中

三、使用flex布局实现垂直居中

一、使用子绝父相

父元素位于相对定位，子元素绝对定位，再结合transform的水平和垂直移动来实现不定宽高的子元素垂直居中

HTML:

<div class="parent">
    父元素
    <div class="child">子元素</div>
</div>

SCSS:

   .parent {
    width: 400px;
    height: 400px;
    background-color: rgb(223, 252, 144);
    position: relative;
    .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); //基于自身的宽度移动
        width: 200px;
        height: 200px;
        background-color: rgb(57, 192, 255);
    }
}

二、使用margin+transform

SCSS:

    .parent {
    width: 400px;
    height: 400px;
    background-color: rgb(223, 252, 144);
    .child {
        margin: 0 auto;
        transform: translateY(50%); //基于自身的宽度移动
        width: 200px;
        height: 200px;
        background-color: rgb(57, 192, 255);
    }
}

三、使用flex布局

SCSS:

 .parent {
    width: 400px;
    height: 400px;
    background-color: rgb(223, 252, 144);
    display: flex;
    align-items: center;
    justify-content: center;
    .child {
        width: 200px;
        height: 200px;
        background-color: rgb(57, 192, 255);
    }
}