Lodret centrering i CSS

CSS er stadig forvirrende for de fleste af os: det har hundredvis af dårligt navngivne egenskaber, som hver især kan påvirke resultatet på ikke-intuitive måder. Den vertikale placering af elementer i webudvikling er vanskelig og har tidligere ofte forårsaget hovedpine. Men de dage er heldigvis forbi.


Det er svært at tro: I 2024 vil det nu være muligt at opnå det ønskede resultat med én linje CSS:

0f1273b25d9806459716

0f1273b25d9806459716

Tidligere brugte folk en række andre muligheder for at opnå det samme resultat:

Flexbox

0f1273b25d9806459716

Absolut positionering

0f1273b25d9806459716

Inline blok

0f1273b25d9806459716

De Browserunderstøttelse af align-indhold er nu meget god, og der er ikke længere et godt argument for at bruge forældede teknikker. Blandt andet behøver du ikke længere en Flexbox til denne opgave og det underordnede element behøver ikke at være i et separat (i modsætning til i eksemplet ovenfor). div indgå. Det er utroligt, at CSS efter årtiers fremskridt først nu har en enkelt egenskab til at kontrollere vertikal centrering.

Tilbage