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

1. 经典方法

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

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

2. flex

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

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

3. grad

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

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