はじめに

「要素を画面の真ん中にもっていきたい」ーー
CSSで一番よく使うテクニックの一つ、それが中央寄せ。

方法はいくつかあり、

①margin: 0 auto;の中央寄せ

.box {
    width: 300px;
    margin: 0 auto;
}

特徴

コード例

.wrapper {
    text-align: center;
}

<div class="wrapper">
    <img src="logo.png" alt="ロゴ">
</div>

コード例(縦・横ともに中央揃え)

.center-box {
    display: flex;
    justify-content: center; /* 横 */
    align-items: center;  /* 縦 */
    height: 300px;
}

<div>
    <div>中央表示される内容</div>
</div>

中央寄せは「要素の種類」と「縦 or 横」で判断！