Comment ce code CSS permet-il de centrer un élément?

Question

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

Ceci est du code CSS pour centrer un bouton dans le viewport. Quelqu'un peut-il expliquer comment cela fonctionne? Je l'ai trouvé quelque part en ligne et cela semble fonctionner mais je ne comprends pas la nécessité de margin-right et de transform. Naturellement, le code ne fonctionne pas sans eux, mais intuitivement je pense que les trois premiers devraient suffire pour centrer l'élément. Je suis relativement nouveau en CSS, donc je comprendrais si cela est considéré comme une question stupide :)

Answer 1

Jetez un coup d'œil à cet article : https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/. En utilisant simplement les trois premières lignes de css (position, top et left), le coin supérieur gauche de l'objet sera centré, ce qui rendra l'ensemble de l'objet complètement désaxé. La translation négative déplace l'objet vers le haut et vers la droite de la moitié de sa hauteur et de sa largeur, respectivement, ce qui le centre. En fait, je ne pense pas que vous ayez même besoin du code margin-right, mais je pourrais me tromper.