Sentrer elementer med CSS: 3 enkle metoder!

0 Shares

Viktige Punkter

Å sentrere elementer i webdesign har tradisjonelt vært en utfordring, men moderne CSS tilbyr nå enkle løsninger for sentrering.
Flexbox er en populær metode for å sentrere elementer, og gir en fleksibel layoutmodell som forenkler justering.
CSS Grid og CSS-posisjonering er også effektive teknikker for å sentrere elementer på nettsider, med god kontroll over layout og justering.

Sentrering av et element i et weboppsett har historisk sett vært en kilde til frustrasjon for designere. Det har ofte ikke vært intuitivt, men mange design krever sentral plassering av elementer. Heldigvis har moderne CSS utviklet seg til å tilby solide løsninger for dette.

Denne artikkelen forklarer hvordan du kan sentrere en div horisontalt og vertikalt ved hjelp av Flexbox, CSS Grid og CSS-posisjonering.

En enkel HTML-fil for øvelse i sentrering

De følgende eksemplene benytter et grunnleggende HTML-dokument for å demonstrere sentrering med CSS. Bruk denne strukturen og juster CSS for hver seksjon for å se hvordan de ulike egenskapene fungerer.

<html>
 <head>
  <style>
  div { width: 100px; height: 100px; }
  body { height: calc(100vh - 16px); }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

Bruk av Flexbox for å sentrere et Div-element

For å benytte Flexbox til sentrering, må du først forstå de grunnleggende prinsippene. Heldigvis er Flexbox enkel i bruk, noe som forklarer hvorfor den er så populær. Den tilbyr en fleksibel layoutmodell for justering og fordeling av rom mellom objekter i en container, noe som gjør den ideell for sentrering av elementer.

Følgende CSS brukes for å oppnå sentrering med Flexbox.

Pakk div-elementet inn i en beholder. Sett `display: flex` på beholderen for å aktivere Flexbox-layout. I et enkelt testscenario kan `body` elementet fungere som en beholder:
```
 body {
  display: flex;
} 
```
Bruk `justify-content` og `align-items` for å justere elementer langs henholdsvis hovedaksen (horisontalt) og kryssaksen (vertikalt). For sentrering langs begge aksene, sett begge til `center`. For å se effekten av vertikal justering, sett også `height` på `body` til `100vh`.
```
 body {
  justify-content: center;
  align-items: center;
} 
```
Gi div-en en bakgrunnsfarge for å visualisere posisjonen:
```
 div { background-color: red; } 
```

Når du inspiserer resultatet i nettleserens utviklerverktøy, vil du se hvordan disse to egenskapene styrer justeringen langs hver akse.

Bruk av CSS Grid for å sentrere et Div-element

Å bruke CSS Grid for sentrering er en annen effektiv tilnærming som gir nøyaktig kontroll over layout og justering.

Definer en beholder for layouten din og bruk `display: grid` for å aktivere CSS-Grid. I dette eksemplet fungerer `body` som beholderen.
```
 body {
  display: grid;
} 
```
Bruk egenskapene `grid-template-columns` og `grid-template-rows` for å definere strukturen på rutenettet. For sentrering er en enkelt kolonne og rad tilstrekkelig, bruk derfor `1fr` for begge.
```
 body {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
} 
```
Bruk `place-items` for å sentrere innholdet i rutenettet, både horisontalt og vertikalt.
```
 body {
  place-items: center;
} 
```
Stil div-elementet for å visualisere det i sentrum av rutenettet.
```
 div {
  background-color: blue;
} 
```

Her styrer en enkelt egenskap sentral plassering av div-en på siden.

Bruk av CSS-posisjonering for å sentrere et Div-element

For å bruke CSS-posisjonering til sentrering, er det også nødvendig å forstå hvordan CSS-transformasjoner med overganger fungerer. Her er en steg-for-steg veiledning med et eksempel.

For å plassere div-elementet, forsikre deg om at beholderen har `position: relative`. Dette etablerer en relativ posisjoneringskontekst, som tillater deg å plassere div-en i midten av beholderen.
```
 body {
  position: relative;
} 
```
Bruk `position: absolute` på div-elementet, og bruk egenskapene `top` og `left` for å plassere div-ens øvre venstre hjørne nøyaktig i midten av beholderen.
```
 div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
} 
```
Transformasjonen `translate(-50%, -50%)` flytter div-en til venstre og oppover med henholdsvis halve bredden og høyden.

Denne metoden virker ved først å sentrere elementets øverste hjørne, og deretter flytte det relativt med halvparten av bredden og høyden.

Flexbox, CSS Grid og CSS-posisjonering er alle kraftfulle verktøy for å sentrere elementer på en nettside. Med Flexbox kan du oppnå horisontal og vertikal sentrering med relativt lite kode. CSS Grid tillater presis justering i to dimensjoner, og CSS-posisjonering kan brukes for å sentrere et element i forhold til sin overordnede beholder.

Ved bruk av disse teknikkene kan du skape nettsider med et rent og profesjonelt utseende.