Centrare elementi con il CSS
Che tu sia uno sviluppatore principiante o veterano prima o poi finirai per cercare questa pagina.
Eccoti dunque 3 modi per centrare un div/elemento in diversi modo.. usali a tuo vantaggio 😀
01. Centrare un elemento orizzontalmente
Data una larghezza fissa puoi dire al tuo elemento di prendersi tanto spazio a sinistra quanto a destra, in modo da posizionarsi ESATTAMENTE al centro su ogni dispositivo
See the Pen Untitled by MirkoDev (@mirkodeveloper-the-bold) on CodePen.
02. Centrare un elemento usando i flexbox
Usare i flexbox e/o i grid items è nel web moderno ormai un must.
Ecco dunque un modo per centrare un div/elemento orizzontalmnente (justify-content: center;) e verticalmente (align-items: center;)
See the Pen Center div using flexbox by MirkoDev (@mirkodeveloper-the-bold) on CodePen.
03. Centrare un div/elemento usando Transform
Usando l’interazione del position absolute dentro un elemento con position relative possiamo dire agli elementi child di posizionarsi esattamente al centro dell’elemento parent
See the Pen Untitled by MirkoDev (@mirkodeveloper-the-bold) on CodePen.
