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. Til denne opgave behøver du ikke længere en flexbox, og child-elementet (i modsætning til i eksemplet ovenfor) behøver ikke at være i et separat `<body>`. div indgå. Det er utroligt, at CSS efter årtiers fremskridt først nu har en enkelt egenskab til at kontrollere vertikal centrering.

Tilbage