1.居中的方法

1.transform translate

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

  <article>
        <div class="classic">😎</div>
    </article>

2.flex

    .flex {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 400px;
            border: 1px solid #000;
        }

  <article class="flex">
        <div>😎</div>
    </article>

3.grid

       .grid {
            display: grid;
            place-items: center;
            height: 400px;
            border: 1px solid #000;
        }

 <article class="grid">
        <div>😎</div>
    </article>