HTML中css居中的三种方式(position & flex & grid)

经典方法

<article>
    <div class="className">内容</div>
</article>

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

flex

<article class="flex">
    <div>内容</div>
</article>

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

grad

<article class="grid">
    <div>内容</div>
</article>

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