Zentrierung: Das Neueste Coolste Art und Weise gegen Die Älteste Coolste Weg

0
34

Dies ist nicht eine umfassende Anleitung zum zentrieren der Dinge. Wir haben Sie!

Dies ist nur eine kleine Beobachtung über alte und neue. Eine der schwierigsten Dinge im Zusammenhang zu zentrieren in CSS ist, wenn Sie benötigen, zentrieren vertikal und horizontal, und Sie nicht wissen, die Breite oder die Höhe, was Sie zentrieren. Vertikale Zentrierung die extra schwierig für die beiden.

Ob Sie es glauben oder nicht, es war ein Weg, das zu tun, sogar im IE 8. Der trick Bestand darin, unter Ausnutzung von display: table; und, dass die Tische hatte diese andere Eigenschaft vertical-align: middle;, die verwendet werden könnten, für vertikale Zentrierung.

Sagen Sie alles, was Sie tun wollte, war center ein Satz, der perfekt in der Mitte des browser-Fensters:


<body>
<span>
Vertikal zentriert und horizontal.
</span>
</body>

Sie konnte tun, wie diese:

html, body {
margin: 0;
height: 100%;
}
body {
display: table;
width: 100%;
}
body > span {
display: table-cell;
vertical-align: middle;
text-align: center;
}

Das könnte der älteste trick im Buch CSS Zentrieren. Hier funktioniert es im IE 8:

Heute haben wir moderne layout-Methoden. Flexbox! CSS-grid!

Hier vollbringen die gleiche Sache mit der modernsten Methoden zur Verfügung:

body {
display: grid;
height: 100vh;
margin: 0;
Platz-items: center center;
}

Wir brauchen nicht einmal zu berühren, den span! Das ist so cutting edge, in der Tat, dass Microsoft Edge unterstützt CSS-grid, nicht unterstützen place-Elemente noch. Sie müssten, um zu verwenden, align-items: center; justify-content: center; statt.

Immer movin’.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!