CSS - Marginauto; - Wie es funktioniert

Verwenden Marge: auto ein Blockelement horizontal zu zentrieren, ist eine bekannte Technik. Aber haben Sie sich jemals gefragt, warum oder wie es funktioniert? Um dies zu beantworten, müssen wir uns zunächst die Funktionsweise von margin: auto ansehen. Auch in der Mischung ist was Auto kann in Rändern tun, wenn es für vertikale Zentrierung und einige andere Probleme funktioniert.

Aber zuerst, was macht Auto eigentlich tun?

Die Definition von Auto variiert mit Elemente, Elementtypen und Kontext. In Rändern, Auto kann eines von zwei Dingen bedeuten: Nehmen Sie den verfügbaren Platz oder 0 px in Anspruch. Diese beiden werden Definieren Sie verschiedene Layouts für ein Element.

"auto" Den verfügbaren Speicherplatz belegen

Dies ist die am häufigsten verwendete Margin Auto Wir kommen oft vor. Durch Zuweisung Auto Am linken und rechten Rand eines Elements nehmen sie den verfügbaren horizontalen Platz im Elementcontainer gleichermaßen ein. Dadurch wird das Element zentriert.

Dies funktioniert jedoch nur für horizontale Ränder (mehr für den Warum später) und auch funktioniert nicht mit Float und Inline-Elemente und an sich auch kann nicht arbeiten im absolut und fest positionierte Elemente (wir werden jedoch sehen, wie man diese Arbeit machen kann).

Faux Float durch den verfügbaren Platz

Schon seit Auto Sowohl im rechten als auch im linken Rand beansprucht der "verfügbare" Raum gleich viel, was wird Ihrer Meinung nach passieren, wenn der Wert liegt Auto wird nur einer von denen gegeben?

Ein linker oder rechter Rand mit Auto nimmt den gesamten "verfügbaren Platz" ein, sodass das Element so aussieht, als sei es nach rechts oder links gespült worden.

“Auto” Berechnet zu 0px

Wie schon erwähnt, Auto funktioniert nicht in Floated-, Inline- und absoluten Elementen. Alle diese Elemente haben bereits entschied sich für ihre Layouts, es ist also sinnlos zu gebrauchen Auto für die Margen und erwarten, dass es genau so zentriert wird.

Dadurch wird der anfängliche Zweck der Verwendung von etwas besiegt schweben. Daher Auto hat in diesen Elementen einen Wert von 0px.

Auto funktioniert auch nicht mit einem typischen Blockelement, wenn es keine Breite hat. Alle Beispiele, die ich Ihnen bis jetzt gezeigt habe, haben Breiten.

Eine Wertbreite Auto werde haben 0px Ränder. Die Breite eines Blockelements deckt in der Regel die Breite des Containers ab Auto oder 100% und damit eine Marge Auto wird zu berechnet 0px in einem solchen Fall.

Was passiert mit vertikalen Rändern mit dem Wert Auto?

Auto Sowohl in den oberen als auch in den unteren Rändern wird immer 0px berechnet (außer für absolute Elemente). W3C-Spezifikation sagt es so:

“Ob “Rand oben” oder “Rand unten” ist “Auto”, Ihr benutzter Wert ist 0 "

Das Warum, nun, das ist bis jetzt ein Rätsel. Es könnte an dem typischen vertikalen Seitenfluss liegen, wo Die Seitengröße nimmt in der Höhe zu. Wenn Sie also ein Element vertikal in seinem Container zentrieren, wird es nicht zentriert, relativ zur Seite selbst, anders als bei horizontaler Ausrichtung (in den meisten Fällen)..

Und vielleicht ist es aus demselben Grund, dass sie beschlossen haben, eine Ausnahme für absolute Elemente hinzuzufügen, die vertikal über die gesamte Seitenhöhe zentriert werden können.

Möglicherweise liegt dies auch am Randeinsturzeffekt (Zusammenbruch benachbarter Elemente)” Margen), eine weitere Ausnahme für die vertikalen Margen.

Letzteres scheint jedoch ein unwahrscheinlicher Fall zu sein - da Elemente, die ihre Ränder nicht zusammenbrechen - wie Floats und Elemente mit Überlauf außer sichtbar, noch 0px vertikale Ränder für zuweisen Auto.

Zentrieren absolut positionierter Elemente

Da es für absolut positionierte Elemente eine Ausnahme gibt, haben wir”ll verwenden Auto Wert, um eine vertikal und horizontal zu zentrieren. Aber vorher müssen wir herausfinden, wann der Wille ist Marge: auto eigentlich so arbeiten, wie wir es wollen, in einem absolut positionierten Element.

Hier kommt eine weitere W3C-Spezifikation ins Spiel:

"Wenn alle drei von “links”, “Breite”, und “Recht” sind “Auto”: Zuerst ein beliebiges einstellen “Auto” Werte für “Rand links” und “Rand rechts” bis 0… "

"Wenn keiner der drei ist “Auto”Wenn beide “Rand links” und “Rand rechts” sind “Auto”, lösen Sie die Gleichung unter der zusätzlichen Bedingung, dass die beiden Ränder gleiche Werte erhalten "

Das sagt so ziemlich das aus horizontal Auto Ränder gleiche Räume zu ergreifen, die Werte für links, Breite und Recht sollte nicht sein Auto , ihr Standardwert. Alles, was wir tun müssen, ist, ihnen in einem absolut positionierten Element einen Wert zu geben. links und Recht sollte haben gleiche Werte für perfekte Zentrierung.

Die Spezifikation erwähnt auch etwas ähnliches für vertikale Ränder.

“Wenn alle drei von “oben”, “Höhe”, und “Unterseite” sind automatisch eingestellt “oben” in die statische Position… ”

“Wenn keiner der drei ist “Auto”Wenn beide “Rand oben” und “Rand unten” sind “Auto”, lösen Sie die Gleichung unter der zusätzlichen Bedingung, dass die beiden Ränder gleiche Werte erhalten… ”

Also für ein absolutes Element vertikal zentriert, es ist oben, Höhe, und Unterseite Werte sollten nicht sein Auto.

Jetzt, indem wir all dies kombinieren, sind wir es”Verstanden:

Fazit

Wenn Sie ein Element auf Ihrer Seite nach rechts oder links leeren möchten, ohne dass die folgenden Elemente es einwickeln (wie bei Float), sollten Sie daran denken, dass Sie die Option verwenden können Auto für Margen.

Das Konvertieren eines Elements in ein absolutes Element, damit es vertikal zentriert werden kann, ist möglicherweise keine gute Idee. Es gibt andere Optionen wie Flexbox und CSS-Transformation, die für diese Optionen besser geeignet sind.