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
Montare blob e file share su Azure App Service
Definire lo stile CSS in base alle dimensioni del container
Blazor PWA e Offline-First
Abilitare HTTP/3 in ASP.NET Core 7.0
Impostare dinamicamente il nome di una run di un workflow di GitHub
Sfruttare la local cache del browser tramite gli ETag in ASP.NET Core
Monitorare e prevenire problemi in produzione
Definire la durata dell'output cache in ASP.NET Core 7
Ottimizzare la persistenza che coinvolge un solo oggetto con Entity Framework Core 7
Ricevere avvisi su metriche dei server Azure Arc
Migliorare la scalabilità di ASP.NET Core 7 grazie all'output cache
3 metodi JavaScript che ogni applicazione web dovrebbe contenere