Die absolute CSS-Position funktioniert nicht mit Rand-Links: Auto Rand-Rechts: Auto

Angenommen, Sie haben das folgende CSS auf ein div-Tag angewendet

.divtagABS {
    position: absolute;
    margin-left: auto;  
    margin-right:auto;
 }

Der Rand links und der Rand rechts werden nicht wirksam

aber wenn Sie Verwandte haben, funktioniert es gut, dh

,divtagREL {
position: relative;
margin-left: auto;  
 margin-right:auto;
}

warum ist das so? Ich möchte nur ein Element zentrieren

Kann jemand erklären, warum es nicht funktioniert, die Ränder in absoluter Position auf Auto zu setzen?

BEARBEITEN: Diese Antwort behauptete, dass es nicht möglich ist, ein absolut positioniertes Element mit zu zentrieren margin: auto;, aber dies ist einfach nicht wahr. Da dies die am besten bewertete und akzeptierte Antwort ist, habe ich sie wohl nur so geändert, dass sie korrekt ist.

Wenn Sie das folgende CSS auf ein Element anwenden

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

Geben Sie dem Element dann eine feste Breite und Höhe, z. B. 200 Pixel oder 40%. Das Element zentriert sich selbst.

Hier ist eine Geige , die den Effekt demonstriert.

Ich habe diesen Trick verwendet, um ein absolut positioniertes Element zu zentrieren . Sie müssen jedoch die Breite des Elements kennen.

.divtagABS {
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
  }

Grundsätzlich verwenden Sie left: 50% und ziehen dann die Hälfte der Breite mit einem negativen Rand zurück.

Wenn das absolute Element eine Breite hat, können Sie den folgenden Code verwenden

.divtagABS{
    width:300px;
    positon:absolute;
    left:0;
    right:0;
    margin:0 auto;
}

Arbeiten JSFiddle unten. Wenn Sie Position Absolue verwenden, margin: 0 autofunktioniert dies nicht, aber Sie können dies tun (wird auch skalieren):

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

Aktualisieren: Working JSFiddle

Ich hatte bereits das gleiche Problem und habe die Lösung, einen Container (in Ihrem Fall .divtagABS-Container) absolut positioniert und dann den Inhalt darin relativ zu positionieren (in Ihrem Fall .divtagABS).

Getan! Das Rand-Links- und Rand-Rechts-AUTO für Ihr .divtagABS funktioniert jetzt.

Alle Antworten waren nur Lösungsvorschläge oder Problemumgehungen. Aber immer noch keine Antwort auf die Frage: Warum Rand: Auto funktioniert mit Position: Relativ, aber nicht mit Position: Absolut.

Die folgende Erklärung war für mich hilfreich:

"Ränder sind bei absolut positionierten Elementen wenig sinnvoll, da solche Elemente aus dem normalen Fluss entfernt werden und daher keine anderen Elemente auf der Seite wegschieben können . Die Verwendung solcher Ränder kann nur die Platzierung des Elements beeinflussen, auf das der Rand angewendet wird. kein anderes Element. " http://www.justskins.com/forums/css-margins-and-absolute-82168.html

Wenn das Element absolut positioniert ist, ist es nicht relativ oder bezieht sich auf ein Objekt - einschließlich der Seite selbst. Ich margin: auto;kann mich also nicht entscheiden, wo die Mitte ist.

Es wartet darauf, explizit informiert zu werden, zu verwenden leftund sich topzu positionieren.

Sie können es weiterhin programmgesteuert mit Javascript oder Ähnlichem zentrieren.

Wenn Sie Stile für die Division definieren, die positioniert sind absolute genau , sind die Angabe von Rändern nutzlos. Weil sie sich nicht mehr im regulären DOM-Baum befinden.

Sie können float verwenden, um den Trick auszuführen.

.divtagABS {
    float: left;
    margin-left: auto;  
    margin-right:auto;
 }