Il existe plusieurs façons de centrer quelque chose en CSS, toutes légitimes, mais certaines sont plus adaptées selon les situations. Voici quelques façons que j'utilise :
Dans un contexte Flexbox, dépendant de la direction, row (horizontale) ou column (verticale), il faut se tourner vers les propriété align-items et justify-content. Leur nom n'est pas très instinctif, j'en conviens, c'est pourquoi Flexbox est plus compréhensible lorsqu'on parle d'axes (X ou Y).
À l'horizontal (par défaut, flex-direction: row), donc lorsque les éléments sont alignés sur l'axe X, c'est "align-items: center" qui permet de centrer les éléments tout verticalement le long de cet axe, et "justify-content: center" pour centrer les éléments horizontalement dans le centre de cet axe. La différence de formulation peut paraître abstraite, donc voici comment un exemple :
Dans un contexte de bloc, lorsque le parent est relatif et que vous souhaitez positionner l'élément enfant au centre "absolu", il faut changer d'aborder changer le contexte de sa position (ce qui revient à le "détacher" de son parent. J'utilise souvent ces petites classes utilitaires pour m'aider à centrer ces éléments :
Code:
.absoluteCenter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.absoluteVertical {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.absoluteHorizontal {
position: absolute;
top: 50%;
transform: translateY(-50%);
}