⭐ 0
🔍
Testo Immagine PDF e Documenti Audio Musica Elettronica Tempo Utilità Validatori Esoterismo Giochi

Come centrare un div in CSS (Flexbox)

Crea visivamente un layout flexbox CSS: direzione flessibile, giustifica contenuto, allineamento elementi, avvolgimento flessibile e spazio sul contenitore, oltre a flex-grow per figlio, flex-shrink e flex-basis, il tutto con un'anteprima dal vivo e CSS copiabile.

Elaborazione... 0%

Risultato

Ecco la risposta diretta alla domanda più posta nei CSS: per centrare un div, metti display: flex, giustifica-content: center e align-items: center sul suo genitore. Questo è tutto: tre dichiarazioni sul contenitore e il bambino si siede perfettamente centrato sia in orizzontale che in verticale al suo interno, a qualsiasi dimensione. Questa pagina apre il generatore con esattamente quella combinazione già applicata, quindi l'anteprima qui sotto mostra che sta lavorando su tre caselle numerate in questo momento.

Prima di flexbox, centrare un div richiedeva alcuni hack: margin: 0 auto centrato solo orizzontalmente e funzionava solo su un blocco a larghezza fissa; il centraggio verticale significava posizione: assoluta con margini negativi o un trucco di trasformazione, entrambi fragili nel momento in cui il contenuto cambiava dimensione. giustifica-contenuto gestisce l'asse principale e allinea-oggetti gestisce l'asse trasversale: insieme si centrano in entrambe le direzioni indipendentemente da quanto sia alto o largo il bambino, motivo per cui questa coppia è diventata la risposta standard.

Trascina qualsiasi controllo qui sotto e osserva le tre caselle di anteprima rimanere centrate mentre il contenitore cambia forma o aggiungi uno spazio tra di loro. Quando sembra corretto, copia il blocco CSS in basso direttamente nel tuo foglio di stile: funziona allo stesso modo in tutti i browser moderni, non è necessaria alcuna libreria.

🛡️
Eseguito nel browser

I tuoi file e input non lasciano mai questo dispositivo. L'elaborazione viene eseguita completamente offline. Sicuro al 100%.

Formati e regole accettati

  • Controlli del contenitore: direzione flessibile, giustificazione contenuto, allineamento elementi, avvolgimento flessibile e input di gap in pixel, applicati in tempo reale all'anteprima.
  • Tre caselle secondarie codificate a colori per impostazione predefinita (aggiungi fino a otto, rimuovi fino a due), ciascuna con i propri campi flex-grow, flex-shrink e flex-basis.
  • Blocco CSS copiabile con una regola .flex-container più una regola .flex-item-N per figlio con proprietà flex non predefinite.

Vantaggi principali

✓ Ogni controllo del contenitore e flex-grow, flex-shrink e flex-basis di ogni bambino aggiornano in tempo reale tre caselle di anteprima numerate, in modo da poter vedere esattamente cosa fanno le regole del flexbox prima di toccare un foglio di stile.
✓ Il generatore stampa solo le regole figlie che effettivamente differiscono dalle impostazioni predefinite CSS, quindi il codice copiato rimane breve e leggibile invece di ripetere flex-grow: 0 su ogni casella.
✓ Le pagine preimpostate risolvono i layout che le persone cercano per nome: centrando un div, una barra di navigazione con logo-link a sinistra-barra di navigazione a destra e colonne flessibili di uguale larghezza: aprine una e lo strumento è già configurato.

Casi d'uso

  • • Ottieni il CSS esatto per centrare un div sia orizzontalmente che verticalmente osservando il funzionamento di giustifica contenuto e allineamento elementi sui riquadri di anteprima dal vivo.
  • • Crea un layout della barra di navigazione con logo a sinistra e collegamenti a destra con spazio tra e allineamento elementi: centro, quindi copia il CSS del contenitore direttamente nel componente dell'intestazione.
  • • Confronta lo spazio tra, lo spazio intorno e lo spazio uniformemente fianco a fianco sulle stesse tre caselle invece di indovinare quale corrisponde alla spaziatura desiderata.