3 enkla sätt att centrera ett element med CSS

Spread the love

Viktiga takeaways

  • Centrering av element i webblayouter har alltid varit en utmaning, men modern CSS stöder nu enkel central positionering.
  • Flexbox är den mest använda metoden för att centrera element, vilket ger en flexibel layoutmodell som möjliggör enkel inriktning.
  • CSS Grid och CSS-positionering är också effektiva metoder för att centrera element på en webbsida, vilket ger exakt kontroll över layout och justering.

Att centrera ett element i din webblayout är en utmaning som alltid har frustrerat designers. Det har inte alltid varit lätt att göra, men många konstruktioner kräver central placering. Lyckligtvis har modern CSS nu bra stöd för centrering.

Lär dig hur du centrerar en div horisontellt och vertikalt med Flexbox, CSS Grid och CSS-positionering.

En enkel HTML-fil för att öva på centrering

Följande exempel använder alla ett minimalt HTML-dokument för att demonstrera centrering med CSS. Använd denna uppmärkning och variera CSS efter varje avsnitt för att se hur dessa egenskaper beter sig.

 <!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

Du måste förstå grunderna i Flexbox innan du använder den för att centrera ett div-element. Lyckligtvis följer Flexbox ett enkelt tillvägagångssätt, vilket är anledningen till att det är det mest använda. Den ger en flexibel layoutmodell som gör det enkelt att justera och fördela utrymme mellan föremål i en behållare, vilket gör den idealisk för att centrera element.

  6 AI-verktyg som hjälper dig att förbättra din mentala hälsa

Använd följande CSS för att uppnå centrering med Flexbox.

  • Linda 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 kroppen fungera som en behållare:
     body {
      display: flex;
    }
  • Använd egenskaperna justera-innehåll och justera-objekt för att justera objekt längs huvudaxeln (horisontell) respektive tväraxeln (vertikal). För att centrera båda axlarna, ställ in dessa egenskaper på centrering. 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 inriktning.
     body {
      justify-content: center;
      align-items: center;
    }
  • Ge div en bakgrundsfärg för att visualisera dess placering på sista sidan:
     div { background-color: red; } 
  • När du visar resultatet i Google Chromes DevTools kan du se hur de två egenskaperna styr justeringen längs varje axel:

      Skivan har fastnat i din Xbox Series X? Hur man matar ut det manuellt

    Använda CSS Grid för att centrera ett Div-element

    Att använda CSS Grid för att centrera ett element är en annan effektiv metod som erbjuder exakt kontroll över layout och justering.

  • Definiera en behållare för din layout och använd skärmstilen: rutnät för att aktivera CSS Grid. I detta fall fungerar kroppen som behållare.
     body {
      display: grid;
    }
  • Använd egenskaperna grid-template-columns och grid-template-rows för att definiera strukturen för 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;
    }
  • Style 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 en enskild egenskap den centrala placeringen av div på din sida:

    Använda CSS-positionering för att centrera ett Div-element

    För att använda egenskapen CSS position för att centrera en div måste du också förstå hur CSS-transformeras med övergångar fungerar. Här är en steg-för-steg-guide med ett exempel.

      Hur man tar bort Google+ från ditt Google-konto
  • För att placera div-elementet, se till att dess behållare har en relativ position. Detta upprättar 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, använd sedan egenskaperna för övre och vänstra för att placera div:s ö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;
    }

    Translate(-50%, -50%)-transformationen flyttar div till vänster och uppåt med halva dess bredd och halva höjden.

  • Denna metod fungerar genom att först centrera elementets övre hörn och sedan flytta det relativt hälften av dess bredd och halva höjden.

    Flexbox, CSS Grid och CSS-positionering är kraftfulla verktyg som du kan använda för att centrera element på en webbsida. Med Flexbox kan du centrera både horisontellt och vertikalt med bara några rader kod. CSS Grid ger kraftfull justering i två dimensioner, och du kan använda CSS-positionering för att centrera ett element i förhållande till dess överordnade behållare.

    Med dessa tekniker kan du se till att dina webbsidor ser rena och professionella ut.