Vertikal centrering i CSS

CSS är fortfarande förvirrande för de flesta av oss: den har hundratals dåligt namngivna egenskaper, som var och en kan påverka resultatet på icke-intuitiva sätt. Den vertikala placeringen av element i webbutveckling är knepig och har ofta orsakat huvudvärk tidigare. Men lyckligtvis är de dagarna över.


Det är svårt att tro: 2024 kommer det nu att vara möjligt att uppnå önskat resultat med en rad CSS:

0f1273b25d9806459716

0f1273b25d9806459716

Tidigare använde människor en mängd andra alternativ för att uppnå samma resultat:

Flexbox

0f1273b25d9806459716

Absolut positionering

0f1273b25d9806459716

Inline block

0f1273b25d9806459716

De Webbläsarstöd för align-content är nu mycket bra och det finns inte längre några bra argument för att använda föråldrade tekniker. Du behöver inte längre en Flexbox för denna uppgift och det underordnade elementet behöver inte vara i en separat (till skillnad från exemplet ovan). div ingå. Det är häpnadsväckande att efter årtionden av framsteg har CSS först nu en enda egenskap för att kontrollera vertikal centrering.

Tillbaka