DIV水平垂直居中的几种方式

Div水平垂直居中的方式

<div class="parent">
	<div class="child"></div>
<div>

1. 绝对定位的方式

.parent {
    position: relative;
}

.child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

2. flex布局的方式

.parent {
    display: flex;
    justify-self: center;
    align-items: center;
}

3. grid布局的方式

.parent {
    display: grid;
    justify-self: center;
    align-items: center;
}

4. fontsize为0的方式

.parent {
    font-size: 0;
    text-align: center;
    &::before{
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}

.child {
    display: inline-block;
    vertical-align: middle;
}