わずか 2 行の CSS でテキストを中央揃えにする

フレックスボックスの使用

/* Method 1 - Centering DIV using Flexbox */
.div1 h1{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

グリッドの使用

/* Method 2 - Center DIV using Grid */
.div2 h1{
    display: grid;
    place-content: center;
}