CSS centrare div: generatore di codice e guida
Il Generatore per Centrare Div permette di ottenere all'istante il codice CSS esatto per allineare qualsiasi elemento in orizzontale, in verticale o su entrambi gli assi. In base alla combinazione scelta tra Flexbox, Grid o posizionamento Assoluto, lo strumento mostra un'anteprima immediata e genera le regole pronte da copiare. È una risorsa gratuita pensata per sviluppatori e web designer che desiderano risolvere i problemi di allineamento nel browser.
Come centrare un div con lo strumento
Per generare le regole CSS necessarie per il centraggio, segui questi semplici passaggi all'interno dell'interfaccia:
- Seleziona l'asse di allineamento desiderato scegliendo tra solo orizzontale, solo verticale oppure Entrambi.
- Scegli il metodo di layout preferito tra Flexbox, Grid o Assoluto.
- Copia il codice CSS generato automaticamente sotto l'anteprima e incollalo nel tuo foglio di stile.
CSS centrare un div con Flexbox o Grid
Le tecniche moderne basate su Flexbox e Grid rappresentano la soluzione più pulita ed efficace. Con Flexbox, si imposta display: flex sul contenitore genitore: la proprietà justify-content: center gestisce l'asse principale, mentre align-items: center regola l'asse trasversale.
Utilizzando Grid, la sintassi diventa ancora più breve. Impostando display: grid sul genitore, basta la singola dichiarazione place-items: center per allineare l'elemento figlio al centro di entrambi gli assi.
Centrare div CSS con posizionamento assoluto
Quando non è possibile modificare la proprietà display del contenitore genitore, si ricorre al metodo Assoluto. Il genitore richiede position: relative, mentre al figlio si assegna position: absolute insieme a top: 50% e left: 50%.
Per correggere lo spostamento dovuto alle dimensioni dell'elemento stesso, si applica transform: translate(-50%, -50%) al figlio. Questo metodo rimuove l'elemento dal normale flusso del documento, quindi va usato con cautela per evitare il collasso dell'altezza del genitore.
Centrare bottone CSS o altri elementi figli
Le stesse regole utilizzate per i contenitori si applicano a qualsiasi elemento figlio presente nell'HTML. Per il layout relativo a centrare bottone css, basta racchiudere il pulsante in un div genitore con display: flex, justify-content: center e align-items: center.
Non occorre aggiungere CSS specifico all'elemento .pulsante: sarà il contenitore genitore a gestirne il posizionamento esatto.
CSS centrare immagine in un div
Anche per le immagini il procedimento è identico. Nell'ambito di css centrare immagine in un div, l'immagine viene trattata come un elemento figlio all'interno del contenitore .contenitore.
Applicando Flexbox o Grid sul genitore, l'elemento grafico si posizionerà perfettamente al centro del box senza alterare la struttura circostante.
Domande frequenti
Come si centra un div in CSS sia in orizzontale che in verticale?
Il modo più rapido consiste nell'usare Flexbox applicando display: flex, justify-content: center e align-items: center al contenitore genitore. In alternativa, con CSS Grid basta impostare display: grid e place-items: center sul genitore. Scegli l'opzione Entrambi nello strumento per ottenere subito il codice esatto per la tua combinazione.
Come centrare un div senza usare Flexbox?
È possibile centrare un div senza Flexbox utilizzando CSS Grid con display: grid e place-items: center sul genitore. Un'altra alternativa è il posizionamento assoluto, assegnando position: relative al genitore e position: absolute con top: 50%, left: 50% e transform: translate(-50%, -50%) al figlio. Seleziona Grid o Assoluto nello strumento per visualizzare le regole esatte.
Come centrare un div con CSS Grid?
Imposta display: grid sul contenitore genitore e aggiungi place-items: center per allineare l'elemento figlio su entrambi gli assi contemporaneamente. Per centrare su un solo asse, usa justify-content: center per l'asse orizzontale oppure align-items: center per quello verticale.
Come si centra un div con position absolute?
Assegna position: relative al contenitore genitore in modo che diventi il contesto di posizionamento, quindi applica all'elemento figlio position: absolute insieme a top: 50% e left: 50%. Questo sposta l'angolo superiore sinistro del figlio al centro, rendendo necessaria la regola transform: translate(-50%, -50%) per spostarlo all'indietro della metà della sua larghezza e altezza.
Perché justify-content: center non funziona nel mio CSS?
La proprietà justify-content ha effetto soltanto se il contenitore genitore ha display: flex oppure display: grid abilitato. Inoltre, in un contenitore flex con direzione predefinita a riga, justify-content controlla l'asse orizzontale mentre align-items gestisce quello verticale, quindi scambiarli è la causa più comune di mancato centraggio.
Come posso centrare un bottone all'interno di un div?
Un pulsante si centra esattamente come qualsiasi altro elemento racchiudendolo in un genitore con display: flex, justify-content: center e align-items: center. Non occorre aggiungere regole CSS particolari all'elemento del bottone stesso. Le medesime tecniche Flexbox, Grid e posizionamento assoluto valide per i div si applicano a bottoni, immagini e altri elementi.
Come si centra un'immagine dentro un div in CSS?
Un'immagine si centra posizionandola all'interno di un contenitore genitore dotato di regole Flexbox o Grid. Applicando display: flex insieme a justify-content: center e align-items: center sul genitore, l'immagine risulterà perfettamente allineata. È possibile applicare esattamente le stesse impostazioni usate per qualsiasi div.
Come si centra un div solo in orizzontale o solo in verticale?
Con Flexbox o Grid, per il solo asse orizzontale si usa justify-content: center sul genitore, mentre per il solo asse verticale si usa align-items: center. Con il posizionamento assoluto, imposta left: 50% con transform: translateX(-50%) per l'orizzontale, oppure top: 50% con transform: translateY(-50%) per il verticale.
Consigliati
-
Tappetino da Scrivania con Cheat Sheet HTML & CSSFlexbox, grid e le regole CSS proprio sotto la tastiera, senza aprire altre schede.
-
HTML and CSS: Design and Build Websites (Jon Duckett)La guida visiva più chiara per imparare la struttura delle pagine e i layout.
-
Monitor portatile KYY 15,6"Il codice da una parte, l'anteprima del sito dall'altra.
Aiuta a mantenere gratuiti gli strumenti. ✨
Le immagini sono solo a scopo illustrativo. In qualità di Affiliato Amazon io ricevo un guadagno dagli acquisti idonei.
