Centrare un div all'interno della pagina è un'operazione che può sembrare semplice, ma risulta spesso problematica soprattutto per quanto riguarda il posizionamento verticale. Tuttavia, esistono vari metodi e possibilità per arrivare allo scopo.
Prima di iniziare definiamo due div, uno all'interno dell'altro, con dimensioni prestabilite e colori diversi.
<div id="parent"> <div id="child"></div> </div>
#parent { width: 200px; height: 200px; background-color: #555; } #child { width: 100px; height: 100px; background-color: #333; }
Il primo esempio si basa sull'utilizzo della proprietà css transform. Il principio è semplice: lo spostamento tramite CSS viene effettuato utilizzando il margine superiore sinistro dell'elemento, quindi posizionando quel punto al centro e translandolo poi del -50% orizzontalmente e verticalmente, otterremo due elementi concentrici.
#parent { position: relative; } #child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Lo stesso risultato è ottenibile utilizzando margin: auto. Anche in questo caso la fisica del CSS farà sì che l'elemento venga posizionato mantenendo egual distanza rispetto ai punti di ancoraggio (top, left, bottom, right).
#parent { position: relative; } #child { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
L'ultima modalità si basa su Flexbox e sulla capacità dell'elemento padre di imporre il posizionamento ai figli.
#parent { display: flex; justify-content: center; align-items: center; }
Tramite justify-content controlliamo il posizionamento sull'asse verticale, con align-items l'asse orizzontale. È anche possibile dare al figlio la capacità di posizionarsi nello spazio, come mostrato nel seguente snippet.
#parent { display: flex; justify-content: center; } #child { align-self: center; }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Migrare una service connection a workload identity federation in Azure DevOps
Assegnare un valore di default a un parametro di una lambda in C#
Supportare il sorting di dati tabellari in Blazor con QuickGrid
Disabilitare automaticamente un workflow di GitHub (parte 2)
Eseguire query verso tipi non mappati in Entity Framework Core
Utilizzare i primary constructor in C#
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Reactive form tipizzati con modellazione del FormBuilder in Angular
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Evitare la script injection nelle GitHub Actions
Sfruttare al massimo i topic space di Event Grid MQTT