Come centrare un div
Impara i 4 metodi principali per centrare elementi in CSS, con esempi pratici e analisi dei pro e contro di ogni approccio.
Risultato finale
Ecco come apparirà il div centrato
Centrato!
Codice Flexbox
Copia e incolla il codice nel tuo progetto
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.centered-div {
width: 200px;
height: 100px;
background-color: #3b82f6;
color: white;
display: flex;
align-items: center;
justify-content: center;
}Vantaggi
- Molto intuitivo e facile da capire
- Funziona sia per centratura orizzontale che verticale
- Supporto browser eccellente
- Flessibile per layout complessi
Svantaggi
- Può influenzare altri elementi nel container
- Richiede un container parent
💡 Raccomandazione
Per la maggior parte dei casi, usa Flexbox. È il metodo più intuitivo, ha un ottimo supporto browser e funziona bene sia per centratura semplice che per layout complessi. Usa CSS Grid se stai gia lavorando con un layout a griglia, e Transform + Position solo quando hai bisogno di centrare contenuto con dimensioni dinamiche.