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
Miglioramenti nelle performance di Angular 16
Inizializzare i container in Azure Container Apps
Migrare una service connection a workload identity federation in Azure DevOps
Ordinare randomicamente una lista in C#
Eseguire una GroupBy per entity in Entity Framework
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Creare form tipizzati con Angular
Ottimizzazione dei block template in Angular 17
Eseguire attività basate su eventi con Azure Container Jobs
Hosting di componenti WebAssembly in un'applicazione Blazor static
Aggiungere interattività lato server in Blazor 8
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8