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
Q# for Quantum Programming, an "only for the brave" session
Gestire i null nelle reactive form tipizzate di Angular
Semplificare il deployment di siti statici con Azure Static Web App
Condividere i workflow tra più repository in GitHub
Ricevere avvisi su metriche dei server Azure Arc
Mascherare l'output di un valore all'interno dei log di un workflow di GitHub
Creare automaticamente una issue di GitHub
Sfruttare l'output cache di ASP.NET Core 7 con i controller
Gestire undefined e partial nelle reactive forms di Angular
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Controllare se un branch esiste nel remote con un workflow di GitHub
Utilizzare gli snapshot con Azure File shares
I più letti di oggi
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Microsoft Visual Studio Code: un nuovo editor gratuito per Windows, MacOSX e Linux per sviluppatori ASP.NET e Node.js
- Registrare servizi multipli tramite chiavi in ASP.NET Core 8
- Chiamare direttamente un numero di telefono con HTML5