Centrer un élément

Quand il y a uniquement du texte, ne pas oublier qu'on peut juste utiliser text-align plutôt que flexbox/grid.

Avec grid

(place-items est un raccourci pour justify-items et align-items)

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

Avec flexbox

.parent {
    display: flex;
}

.child {
    margin: auto;
}

ou

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