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

79

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?

user1118019
quelle
einfach benutzen margin: auto;. Bei absoluter Position werden alle anderen Stilelemente (in Bezug auf Position / usw.) ignoriert.
hjpotter92
Wickeln Sie es in ein <center> -Tag und setzen Sie die Breite von .divtagABS auf 100%.
Chloe
Ich kann bestätigen: Obwohl einige sagen, dass diese Aussage veraltet ist, habe ich einen nicht zentrierten Fehler für position: absolute;IE Edge festgestellt .
WoodrowShigeru

Antworten:

154

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.

Kevin Bowersox
quelle
3
url: vision.to/articles/margins-and-absolute-positioning.php funktioniert nicht, bitte ersetzen
chrmod
2
"Ein Element mit absoluter Position kann nicht zentriert werden ..." Dies ist eigentlich nicht der Fall: Der Schlüssel besteht darin, alle top/bottom/left/rightEigenschaften auf zu setzen 0und zu deklarieren widthund heightdann margin: autodas absolut positionierte Element automatisch zu zentrieren . Siehe: Absolute Zentriertechnik ; Es ist auch im Smashing Magazine .
DynamicDispatch
2
Und um eine Breite pseudodynamisch zu machen, verwenden Sie width: 100%;und (dh) max-width: 500px;.
WoodrowShigeru
1
Ja, Sie müssen hinzufügen width: 100%, damit es mit Edge und IE9-11 funktioniert.
Huelfe
1
Ich denke, Sie müssen nur links, rechts und eine (maximale) Breite einstellen, damit es zentriert wird. Für die horizontale Ausrichtung ist weder unten noch oben erforderlich. Obwohl Sie für bewährte Methoden mindestens eine dieser Einstellungen vornehmen sollten, damit Browser nicht falsch interpretiert werden können
Empi
67

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.

Chipcullen
quelle
Ja, das sollten Sie verwenden, wenn das Element eine feste Breite hat.
Bantros
Brillant. Vielen Dank für dieses
Baumgesicht
Sie können den linken Rand verwenden: -25%; um es zu zentrieren, anstatt eine Zahl fest zu codieren.
Aaron Harun
4
@ AaronHarun - leider nein, das wird nicht so funktionieren, wie Sie es erwarten. Ich denke, die 25% werden auf der Breite der Eltern basieren. Ich habe einen Codestift eingerichtet, um es zu testen: codepen.io/chippper/pen/xwKIl - Sie können die letzte Zeile von CSS umschalten, um zu sehen, was ich meine.
Chipcullen
Dies veranlasste mich zu einem ähnlichen Trick, aber mit margin-left: -50%;. Seltsamerweise hat es ein sehr seltsames Ausrichtungsproblem für mich behoben!
Cregox
38

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;
}
GilbertSun
quelle
Brillant ! Aber warum funktioniert es nicht, wenn nicht links und rechts eingestellt sind?
Geoffroy
1
Sehr schöne Lösung. Funktioniert auch mit Breite: 100% unter Bootstrap;)
Andrei Hardau
Wenn Sie es vertikal und horizontal zentrieren möchten, erweitern Sie dies einfach nach oben: 0; unten: 0; Kombinieren Sie dies mit einem CSS 3-Übergang für Breite und Höhe und Sie haben einen ziemlich schönen Effekt
Daniel Worthington-Bodart
Ich denke, dies ist der horizontale Fall der Absolute Centering-Technik (auch: Smashing Magazine ), die margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;(mit deklariertem widthund height) sowohl für die horizontale als auch für die vertikale Zentrierung verwendet. In den verlinkten Artikeln wird die Funktionsweise dieser Methode erläutert und mit anderen Zentrierungsmethoden verglichen.
DynamicDispatch
@geoffroy weil left, right, top, und bottomsind gefassten zu autostandardmäßig aktiviert und dies, zusammen mit einem absoluten Layout, zu verhindern tatsächlich margin: autospürbar zu sein
asdru
17

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

In der Hälfte gebacken
quelle
3
Es ist ein sehr schöner CSS-Hack
Dinesh Patra
Beste Arbeit mit Absolute Position Divs, aber es gibt ein Problem in IE10, wenn Positioning Div Breite mehr als Elternbreite hat ... :(
iTux
1

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.

Rafael Camargo
quelle
1

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

Alex Vovchuk
quelle
-1

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.

Codecraft
quelle
-4

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;
 }
Starx
quelle