3 enkla sätt att centrera ett element med CSS
Snabblänkar
⭐ En enkel HTML-fil för att öva centrering
⭐ Använd Flexbox för att centrera ett Div-element
⭐ Använd CSS Grid för att centrera ett Div-element
⭐ Använd CSS Positioning för att centrera ett Div-element
Viktiga lärdomar
Att centrera element inom webbdesign var en gång en formidabel uppgift, men modern CSS underlättar enkel anpassning till mitten.
Flexbox har vuxit fram som den dominerande tekniken för att anpassa innehåll på ett centrerat sätt, och erbjuder ett mångsidigt och anpassningsbart rutnätssystem som underlättar sömlöst arrangemang av element.
Centralisering av element på en webbplats kan uppnås genom användning av både CSS Grid och positioneringstekniker, vilket ger omfattande precision vid kontroll av arrangemang och inriktning av innehåll.
Att centrera ett element i en webblayout har länge varit ett problem för designers, eftersom det inte alltid har varit en enkel uppgift att uppnå. Ändå kräver många designer att element placeras i mitten, och tack och lov erbjuder modern CSS robust stöd för detta ändamål.
Förstå processen att centrera en div både horisontellt och vertikalt med hjälp av flexbox, CSS grid samt traditionella CSS-positioneringstekniker.
En enkel HTML-fil för att öva centrering
De medföljande kodexemplen illustrerar implementeringen av horisontell justering genom användning av en grundläggande HTML-struktur, samtidigt som CSS-egenskaper manipuleras för olika effekter. Genom att experimentera med olika formatmallar kan man få en inblick i hur dessa attribut fungerar.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
Använda Flexbox för att centrera ett Div-element
Flexbox använder en enkel strategi som har gjort den till det föredragna valet på grund av dess anpassningsförmåga. Layoutmodellen underlättar justering och fördelning av utrymme med lätthet, vilket gör den till en optimal lösning för att centrera komponenter i en container.
Centralisera innehåll med hjälp av flexbox genom att tillämpa följande CSS-regler:
⭐ Vik in ditt div-element i en behållare. Använd egenskapen display: flex på behållaren för att aktivera flexbox-layouten. I ett enkelt testfall kan body fungera som en behållare:
body {
display: flex;
}
⭐ Använd egenskaperna justify-content och align-items för att justera objekt längs huvudaxeln (horisontell) respektive korsaxeln (vertikal). För att centrera båda axlarna, ställ in dessa egenskaper till centrera . För en enkel demo bör du också ställa in kroppens höjd till 100vh, så att du kan se effekten av vertikal justering.
body {
justify-content: center;
align-items: center;
}
⭐ Ge div en bakgrundsfärg för att visualisera dess placering på den slutliga sidan:
div { background-color: red; }
topp-till-botten och vänster-till-höger orientering.
Använda CSS Grid för att centrera ett Div-element
Centrering av ett element med CSS Grid ger en hög grad av precision vid kontroll av layout och justering, vilket ger större flexibilitet vid utformning av webbsidor med komplexa strukturer.
⭐ Definiera en behållare för din layout och använd stilen display: grid för att aktivera CSS Grid. I det här fallet används body som behållare.
body {
display: grid;
}
⭐ Använd egenskaperna grid-template-columns och grid-template-rows för att definiera strukturen på ditt rutnät. För centrering räcker det med en enda kolumn och rad, så använd 1fr för båda.
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
⭐ Använd egenskapen place-items för att centrera innehållet i rutnätet, både horisontellt och vertikalt.
body {
place-items: center;
}
⭐ Stil bakgrunden på ditt div-element för att visualisera det i mitten av rutnätsbehållaren.
div {
background-color: blue;
}
I det här fallet styr ett ensamt attribut den överordnade positioneringen av Div-elementet på din webbsida:
Använda CSS-positionering för att centrera ett Div-element
Att centrera ett Div-element med hjälp av CSS-egenskapen position kräver en förståelse för hur CSS-transformationer och övergångar fungerar. Denna förståelse möjliggör korrekt justering av elementet inom dess överordnade container. Nedan beskrivs en detaljerad procedur tillsammans med ett illustrativt exempel.
⭐ För att positionera div-elementet, se till att dess behållare har en relativ position. Detta skapar en relativ positioneringskontext, så att du kan placera div i mitten av dess behållare.
body {
position: relative;
}
⭐ Tillämpa absolut positionering på div-elementet och använd sedan egenskaperna topp och vänster för att placera div-elementets övre vänstra hörn exakt i mitten av dess behållare.
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
}
Transformationen translate(-50%, -50%) flyttar div till vänster och uppåt med halva dess bredd och halva dess höjd.
Detta tillvägagångssätt fungerar genom att först anpassa elementets övre vänstra hörn med skärmens mittpunkt, följt av att flytta det horisontellt och vertikalt med hälften av dess bredd respektive hälften av dess höjd.
Flexbox, CSS Grid och CSS-positionering är mycket effektiva tekniker för att centrera innehåll på en webbplats. Genom att använda Flexbox kan man enkelt uppnå horisontell och vertikal centrering med minimal kodning.CSS Grid erbjuder robusta anpassningsmöjligheter i två dimensioner, medan CSS-positionering gör det möjligt att centrera ett element i förhållande till det överordnade elementet.
Genom att använda sådana metoder är det möjligt att garantera ett raffinerat och polerat utseende för ens webbplats.