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
Rendere i propri workflow e le GitHub Action utilizzate più sicure
.NET Aspire per applicazioni distribuite
Disabilitare le run concorrenti di una pipeline di Azure DevOps
Fissare una versione dell'agent nelle pipeline di Azure DevOps
Potenziare la ricerca su Cosmos DB con Full Text Search
Eseguire i worklow di GitHub su runner potenziati
Aggiornare a .NET 9 su Azure App Service
Cancellare una run di un workflow di GitHub
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Usare il colore CSS per migliorare lo stile della pagina
Ordine e importanza per @layer in CSS
Migliorare la scalabilità delle Azure Function con il Flex Consumption