Centrer un élément en position: absolute

À force d'utiliser flex, j'oublie ce bon vieux "truc"… (qui marche aussi avec position: fixed)

Centrer horizontalement seulement :

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;

Version plus moderne :

position: absolute;
left: 50%;
transform: translateX(-50%);

Centrer horizontalement et verticalement :

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Pour essayer, dans les outils de développement, appliquer ces styles à ce carré rouge ci-dessous :