3 eenvoudige manieren om een element te centreren met CSS
Snelle links
⭐ Een eenvoudig HTML-bestand om centreren te oefenen
⭐ Flexbox gebruiken om een Div-element te centreren
⭐ CSS raster gebruiken om een Div-element te centreren
⭐ CSS positionering gebruiken om een Div-element te centreren
Belangrijkste punten
Het centreren van elementen in webontwerpen was ooit een enorme opgave, maar met het hedendaagse CSS is het uitlijnen naar het midden moeiteloos.
Flexbox is uitgegroeid tot de belangrijkste techniek voor het centraal uitlijnen van inhoud en biedt een veelzijdig en aanpasbaar rastersysteem waarmee elementen naadloos kunnen worden gerangschikt.
Het centraliseren van elementen op een website kan worden bereikt door gebruik te maken van zowel CSS Grid als positioneringstechnieken, wat uitgebreide precisie biedt bij het regelen van de indeling en uitlijning van inhoud.
Het centreren van een element binnen een weblay-out is lang een ergernis geweest voor ontwerpers, omdat het niet altijd een eenvoudige taak was om te bereiken. Desalniettemin vereisen veel ontwerpen dat elementen in het midden worden geplaatst en gelukkig biedt het hedendaagse CSS robuuste ondersteuning voor dit doel.
Begrijp het proces van het centreren van een div, zowel horizontaal als verticaal, met behulp van flexbox, CSS grid en traditionele CSS positioneringstechnieken.
Een eenvoudig HTML-bestand om centreren te oefenen
De meegeleverde codevoorbeelden illustreren de implementatie van horizontale uitlijning door gebruik te maken van een basis-HTML-structuur, terwijl CSS-eigenschappen worden gemanipuleerd voor verschillende effecten. Experimenteren met verschillende stylesheets geeft inzicht in het gedrag van deze eigenschappen.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
Flexbox gebruiken om een Div-element te centreren
Flexbox maakt gebruik van een eenvoudige strategie waardoor het de voorkeur geniet vanwege de aanpasbaarheid. Het lay-outmodel vergemakkelijkt het uitlijnen en verdelen van ruimte met gemak, waardoor het een optimale oplossing is voor het centreren van componenten binnen een container.
Centraliseer inhoud met behulp van flexbox door de volgende CSS-regels toe te passen:
⭐ Wikkel je div-element in een container. Pas de eigenschap display: flex toe op de container om de Flexbox-lay-out te activeren. In een eenvoudige testcase kan de body als container dienen:
body {
display: flex;
}
⭐ Gebruik de eigenschappen justify-content en align-items om items respectievelijk langs de hoofdas (horizontaal) en de dwarsas (verticaal) uit te lijnen. Stel deze eigenschappen in op centreren om beide assen te centreren. Voor een eenvoudige demo moet u ook de hoogte van de body instellen op 100vh, zodat u het effect van de verticale uitlijning kunt zien.
body {
justify-content: center;
align-items: center;
}
⭐ Geef de div een achtergrondkleur om de plaatsing op de eindpagina te visualiseren:
div { background-color: red; }
de oriëntatie van boven naar beneden en van links naar rechts.
CSS Grid gebruiken om een div-element te centreren
Het centreren van een element met CSS Grid biedt een hoge mate van precisie bij het beheren van de lay-out en uitlijning, waardoor meer flexibiliteit mogelijk is bij het ontwerpen van webpagina’s met complexe structuren.
⭐ Definieer een container voor uw lay-out en pas de stijl display: grid toe om CSS Grid te activeren. In dit geval dient de body als container.
body {
display: grid;
}
⭐ Gebruik de eigenschappen grid-template-kolommen en grid-template-pagina’s om de structuur van uw raster te definiëren. Voor centrering is een enkele kolom en rij voldoende, dus gebruik 1fr voor beide.
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
⭐ Gebruik de eigenschap place-items om de inhoud van het raster te centreren, zowel horizontaal als verticaal.
body {
place-items: center;
}
⭐ Geef de achtergrond van je div-element een stijl om het in het midden van de rastercontainer weer te geven.
div {
background-color: blue;
}
In dit geval bepaalt een enkel attribuut de belangrijkste positionering van het div-element op je webpagina:
CSS-positionering gebruiken om een Div-element te centreren
Om een Div-element te centreren met behulp van de CSS position eigenschap, moet u begrijpen hoe CSS-transformaties en -overgangen werken. Dit begrip maakt de juiste uitlijning van het element binnen zijn bovenliggende container mogelijk. Hieronder volgt een gedetailleerde procedure en een voorbeeld ter illustratie.
⭐ Om het div element te positioneren, zorg je ervoor dat de container een relatieve positie heeft. Dit zorgt voor een relatieve positioneringscontext, zodat je de div in het midden van zijn container kunt plaatsen.
body {
position: relative;
}
⭐ Pas absolute positionering toe op het div-element en gebruik vervolgens de eigenschappen top en left om de linkerbovenhoek van de div precies in het midden van de container te plaatsen.
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
}
De transformatie vertalen(-50%, -50%) verplaatst de div naar links en omhoog met de helft van zijn breedte en de helft van zijn hoogte.
Bij deze aanpak wordt eerst de linkerbovenhoek van het element uitgelijnd met het midden van het scherm en vervolgens horizontaal en verticaal verschoven met respectievelijk de helft van de breedte en de helft van de hoogte.
Flexbox, CSS Grid en CSS positionering zijn zeer effectieve technieken voor het centreren van inhoud op een website. Door Flexbox te gebruiken, kun je eenvoudig horizontale en verticale centrering bereiken met minimale codering.CSS Grid biedt robuuste uitlijningsmogelijkheden in twee dimensies, terwijl het gebruik van CSS positionering het mogelijk maakt om een element te centreren ten opzichte van zijn parent element.
Door dergelijke methodes toe te passen, is het mogelijk om een verfijnd en gepolijst uiterlijk voor je website te garanderen.