Centreren: De Nieuwste Coolste Manier vs. De Oudste Coolste Manier

0
45

Dit is geen uitgebreide handleiding voor het centreren van de dingen. Wij hebben dat!

Dit is slechts een kleine observatie over oud en nieuw. Een van de lastige dingen in verband met het centreren in CSS is wanneer je nodig hebt om het centrum van zowel verticaal als horizontaal en u weet niet de breedte of de hoogte van wat je te centreren. Verticaal centreren wordt het extra lastig van de twee.

Geloof het of niet, er was een manier om dat te doen zelfs in IE 8. De truc was profiteren van display: table; en die tafels was die andere goederen, vertical-align: middle;, die gebruikt kunnen worden voor verticaal te centreren.

Zeggen dat alles wat je wilde doen was midden in een zin perfect in het midden van het venster van de browser:


<body>
<span>
Verticaal en horizontaal gecentreerd.
</span>
</body>

Dat zou je kunnen doen als dit:

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

Dat is misschien de oudste truc in het Boek van CSS Centreren. Hier is het werken in internet explorer 8:

Vandaag hebben we meer moderne lay-out methoden. Flexbox! CSS grid!

Hier is het volbrengen van de hetzelfde met de meest moderne methoden beschikbaar:

body {
display: grid;
hoogte: 100vh;
margin: 0;
plaats-items: center center;
}

We hoeven niet eens te raak de span-er! Dit is dus de cutting edge, in feite, dat Microsoft Rand, die ondersteunt CSS grid, geen ondersteuning plaats-items nog niet. Je zou gebruik maken van lijn-items: center; en rechtvaardigen-inhoud: center; in plaats daarvan.

Altijd movin’.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!