Zentrum Position absolutes Objekt horizontal ausrichten

Question

Ich habe ein Element, dessen Position absolut ist das einzige Problem, dem ich gegenüberstehe, habe ich einige Eigenschaften angewendet, um es horizontal auszurichten und es funktioniert gut auf Mozilla, aber die gleichen Eigenschaften funktionieren nicht auf Chrom hier ist mein Code

html

<a href="#section1" class="scrollTo downarrow"><img src="images/navbar_downarrow.png" class="img-responsive"/></a> 

css

.slider{ 
     position: relative; 
     background-image: url("../images/slider.jpg"); 
     background-size: 100% 100%; 
     background-repeat: no-repeat; 
    } 
    .slider a.downarrow{ 
     position: absolute; 
     margin-left: auto; 
     margin-right: auto; 
     left: 0; 
     right: 0; 
     bottom: 20px; 
     display: table; 
    } 

Answer 1

Ein nützlicher Trick zum Zentrieren von Elementen ist die Verwendung des transform: translate Stils zusammen mit top, margin-leftleft oder margin-top.

Um Ihre Frage zu beantworten, müssen Sie die folgenden Stile zu Ihrem .slider a.downarrow Elemente anwenden:

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

---

Die Art und Weise dies funktioniert, ist, weil, wenn translate mit einem Prozentwert verwendet wird, wird der Wert berechnet basierend auf den Elementen Höhe/Breite, auf die es angewendet wird.

top, margin-leftleft und margin-top Prozentwerte basieren auf dem Mutterelement oder in dem Fall des Elements berechnet hat position: absolute darauf angewendet auf der Basis des nächstgelegenen Elternteils mit position: relative/absolute.

Um ein Element zu zentrieren, müssen Sie nur einen Wert von 50% zu beiden top, margin-leftleft oder margin-top und einen Wert von -50% zu translate anzuwenden.

Für left und margin-left müssen Sie translateX(-50%) und für die anderen translateY(-50%) verwenden.

EDIT: Added eine Erklärung