Nå kan du sentrere en div vertikalt helt uten flexbox og grid

Utrolig, men sant: Nå gjør align-content det du alltid trodde den skulle.

Vi er ganske stolte av at vi klarte å sentrere denne teksten med CSS, ja. 📸: Ole Petter Baugerød Stokke
Vi er ganske stolte av at vi klarte å sentrere denne teksten med CSS, ja. 📸: Ole Petter Baugerød Stokke Vis mer

Én av de mest brukte memene innen programmering, i alle fall webutvikling, er dette med å sentrere en div vertikalt.

Det har alltid fantes en rekke måter å gjøre det på, men det vanligste er det også ChatGPT foreslår når vi spør hvordan vi enklest mulig løser dette problemet:

Bruke flexbox, eller grid. Som ofte ender opp med massevis av meningsløse div-er som containere.

Men visste du at du nå kan sentrere en div med én linje CSS, helt uten hverken flexbox eller grid?

Dette svarer ChatGPT når vi spør hvordan vi sentrerer en div.
Dette svarer ChatGPT når vi spør hvordan vi sentrerer en div. Vis mer

align-content: center

Vi ble klar over nyheten gjennom blogginnlegget til James Smith, på build-your-own.org, som i skrivende tidspunkt troner aller høyest på r/programming på Reddit.

«align-content virker i standard-layouten i 2024, og lar deg vertikalt sentrere med én CSS-egenskap» skriver han, og går gjennom hvorfor dette er store og gode nyheter for mange.

Og jommen har han ikke helt rett; du kan nå sentrere en div ved å ganske enkelt få med dette i CSS-en:

align-content: center;

Nå kan du enkelt sentrere en div med én linje CSS gjennom align-content.
Nå kan du enkelt sentrere en div med én linje CSS gjennom align-content. Vis mer

Støttes av 82 prosent

CSS-endringen har ifølge caniuse.com vært støtta siden blant annet:

  • Chrome 123
  • Firefox 125
  • Safari 17.4
  • Opera 109

Som vanlig er du altså ikke sikra at alle brukerne dine får glede av dette, men ifølge samme kilde har næmere 82 prosent av verdens nettbrukere en nettleser som støtter dette.

– Topp. Jeg kan knapt vente til 2034 når jeg kan begynne å bruke dette på nettsidene mine uten å være bekymra for kompabilitet, skriver en bruker syrlig på Reddit.

Men dette er i alle fall godt nok for mine hobbyprosjekter.