CSS实现水平垂直居中9种方法10. 未完待续

分享下几种水平垂直居中的方法

<div class='content'>
    <div class='box'></div>
</div>

1.position:absolute+transform

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

2.position:absolute+margin

.content{
    position:relative
}
.box{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

3.flex

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

4.flex+margin

.content{
    display: flex;
}
.box{
    margin:auto
}

5.table+magin

.content{
    display: table-cell;
    vertical-align: middle;
}
.box{
    margin: auto
}

6.grid

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

7.grid+margin

.content{
    display: grid;
}
.box{
    margin: auto;
}

8.grid+grid-template

.content{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows:1fr auto 1fr
}
.box{
    grid-column: 2/2;
    grid-row: 2/2;
}

9.grid+grid-area

.content{
    display: grid;
}
.box{
    grid-area: 2/2;
}