【css3】盒子居中的8中方法

【css3】盒子居中的8种方法

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

1.父元素相对定位；子元素绝对定位

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

2.父元素相对定位；子元素绝对定位

.parent{
    position:relative;
}
.child{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

3.flex布局

.parent{
    display:flex;
    justify-content:conter;
    align-item:center;
}

4.flex布局

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

5.父元素flex布局

.parent{
    display:flex;
}
.child{
    margin:auto;
}

6.grid网格布局

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

7.grid网格布局

.parent{
    display:grid;
    place-items:center;
}

8.grid网格布局

.parent{
    display:grid;
}
.child{
    align-self:center;
    juslify-self:center;
}