Dies ist kein umfassender Leitfaden zum Zentrieren. Den haben wir!
Dies ist nur eine kleine Beobachtung über Alt und Neu. Eines der kniffligsten Dinge bei der Zentrierung in CSS ist, wenn man sowohl vertikal als auch horizontal zentrieren muss und die Breite oder Höhe dessen, was man zentriert, nicht kennt. Die vertikale Zentrierung ist dabei die extra knifflige.
Ob Sie es glauben oder nicht, es gab sogar eine Möglichkeit, das bereits in IE 8 zu tun.Der Trick bestand darin, `display: table;` auszunutzen und dass Tabellen diese andere Eigenschaft hatten, `vertical-align: middle;`, die für die vertikale Zentrierung verwendet werden konnte.
Sagen wir, alles, was Sie tun wollten, war, einen Satz perfekt in der Mitte des Browserfensters zu zentrieren
...
<body>
<span>
Centered vertically and horizontally.
</span>
</body>
...Das konnten Sie so machen
html, body {
margin: 0;
height: 100%;
}
body {
display: table;
width: 100%;
}
body > span {
display: table-cell;
vertical-align: middle;
text-align: center;
}Das mag der älteste Trick im Buch der CSS-Zentrierung sein. Hier funktioniert er in IE 8
Heute haben wir modernere Layoutmethoden. Flexbox! CSS Grid!
Hier wird dasselbe mit den modernsten verfügbaren Methoden erreicht
body {
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}
Wir müssen nicht einmal den span da anfassen! Das ist sogar so auf dem neuesten Stand, dass Microsoft Edge, das CSS Grid unterstützt, `place-items` noch nicht unterstützt. Sie müssten stattdessen `align-items: center;` und `justify-content: center;` verwenden.
Immer in Bewegung.
Haha, "auf dem neuesten Stand"! Ich verstehe, was Sie getan haben.
Beim ältesten coolen Weg muss man kein `height` für `html` oder `body` setzen. Im neuesten coolen Beispiel kann man eine Kurzschreibweise für `place-items` verwenden; ein einzelnes "center" zentriert auf beiden Achsen.
Ich kann nur Methoden verwenden, die von IE11 und höher unterstützt werden, daher verwende ich derzeit gerne absolute Positionierung und -50%-Transformationen...
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
IE11 unterstützt Flexbox, hat aber einige Fehler. Das funktioniert
Man kann auch
funktioniert wie erwartet.
Das Problem mit der Translate-Methode ist, dass sie nicht mehr wie erwartet funktioniert, wenn man irgendwann eine Transform-Skalierung verwenden muss.
Ein weiteres Problem mit dem Translate-Trick ist, dass beim Drucken des Seiteninhalts mit diesem Trick die Zentrierung nicht richtig funktioniert. Da (viele) Druckertreiber CSS-Transformationen nicht unterstützen. Zumindest habe ich das herausgefunden.
Ich hätte den coolen neuen Weg neulich gebrauchen können, naja, ich weiß jetzt, was ich nächstes Mal verwenden werde.
Man könnte das (was wahrscheinlich ein
<
div> hätte sein sollen) auch mit der alten Methode vermeiden: Setzen Sie das `html`-Element auf `display: table` und das `body`-Element auf `display: table-cell`. Dann könnten Sie die gesamte Ausrichtung im `body` selbst vornehmen.
Ich bin mir nicht sicher, wie relevant das heutzutage ist, aber zumindest bräuchte man keine zusätzliche Markierung.
Der neue Code hat ein großes Problem. Sobald Sie ein zweites blockbasiertes Element wie einen zweiten Absatz hinzufügen, erstellt das Grid zwei Zeilen, die jeweils die Hälfte der Viewport-Höhe einnehmen und auch die Absätze separat v/h in jeder Zeile zentriert platzieren. Bei mehr Absätzen wäre ein zusätzlicher Wrapper erforderlich.
Ich bevorzuge immer noch Flexbox
Und auch der Flexbox-Weg?
display: flex;
align-items: center;
justify-content: center;
:)
@Chris…. warum haben sie sich das nicht überlegt
place-items: middle;
Und es würde vertikal und horizontal in einer Deklaration ausrichten?
Weil das nicht funktioniert. Richtig verwendet wird es
place-items: center;oderplace-items: center center;Lesen Sie den letzten Absatz, warum
Mein Favorit