4 modi per centrare un contenitore con il CSS

Benvenuti nel primo post sul web development o sviluppo web!
Iniziamo in grande stile con un articolo su un problema che fino ad alcuni anni fa ha arrovellato le menti di non pochi neofiti: centrare orizzontalmente e verticalmente un div, un contenitore, usando solo il CSS. Attualmente il problema si risolve molto facilmente: il CSS o Cascade Style Sheet si è aggiornato, perfezionato e continua a evolversi con nuove proprietà e funzionalità. Centrare perfettamente un div o un elemento è molto intuitivo, a patto che lo sviluppatore sia cosciente del codice che sta scrivendo, del contesto e degli effetti dell'uso un certo comando. Addirittura molti visual builder di WordPress come Elementor integrano un tasto che permette di automatizzare il processo e ottenere il risultato corretto senza scrivere un solo carattere del foglio CSS.

Oggi vediamo 4 modi per centrare un div contenuto, soffermandoci sulla descrizione delle regole che useremo e sul loro funzionamento.

Codice iniziale

Consideriamo questo codice iniziale, composto da HTML e CSS che useremo come base per i prossimi punti:

<div class="container">
  <div class="content"></div>
</div>

.container {
  width: 300px;
  height: 300px;
}

.content {
  width: 80px;
  height: 80px;
  background-color: black;
}

Si tratta di un codice molto semplice. Abbiamo un div content, rappresentato da un quadrato nero, dentro un div container. A entrambi assegniamo una larghezza width e una altezza height precise per preparare un setup adatto all'applicazione delle regole che vedremo. Infatti, come dicevamo prima, il contesto è molto importante per capire il funzionamento e gli effetti di certe regole. Per evitare trattati era necessario mettere dei paletti e circoscrivere il problema.
Detto questo, il nostro obbiettivo è centrare il quadrato nero all'interno del container. Se volete testare il codice, ricordate di utilizzare il comando "Ispeziona" o "Analizza" del browser per tenere sotto controllo i cambiamenti e le variazioni che si generano aggiungendo una determinata proprietà. Ora andiamo al sodo: procediamo con il primo metodo.

La questione width

Nell'esempio che stiamo prendendo in considerazione abbiamo assegnato un valore di width ben preciso al container, al content. Questo perché in caso contrario entrambi occuperebbero il 100% della larghezza del proprio parent (che, in assenza di regole specifiche, coinciderebbe con tutta la larghezza della finestra del browser) e di conseguenza sarebbero già centrati: non ci sarebbe spazio a destra e sinistra. Nel nostro esempio però l'intenzione è quella di analizzare i casi in cui non vogliamo che la width sia al 100%, ma piuttosto esaminare gli effetti di determinate regole. Per chiarezza di esposizione impostiamo una width fissa in px.

1. Display: table-cell e vertical-align: middle

Il primo metodo è il più obsoleto. Non utilizzatelo se non dovete effettivamente creare una tabella. display: table-cell; è una regola che deriva da display: table;: applicandola a un div, permette di gestirlo come la cella di una tabella, come facilmente intuibile. Entrando un po' più nel tecnico, se la regola display: table; permette di assegnare a un div il comportamento della <table> dell’HTML, display: table-cell;, consente di gestire il div a cui è attribuita come la cella di una <table>, la <td> dell’HTML.

Centrare orizzontalmente

.content {
  [...]
  margin-left: auto;
  margin-right: auto;
  /*In alternativa*/
  margin: 0 auto;
}

Per centrare il content con display: table-cell; basta utilizzare i classici margin-left: auto; e margin-right: auto;. Questo centrerà perfettamente in orizzontale il div content, distribuendo lo spazio in eccesso alla sua destra e alla sua sinistra.
Spesso si trova la stessa regola nella forma margin: 0 auto, che sconsiglio perché per modificare margin top e bottom dovreste scrivere un'altra regola e ci sarebbe una ripetizione (non è il caso di approfondire adesso). Si applica la proprietà al div content, figlio di container, come indicato nel codice riportato.
Attenzione: non abbiamo ancora assegnato display: table-cell;. Infatti assegnare il valore auto ai margin left e right è un metodo comune che funziona in molteplici situazioni e con diversi display, la condizione fondamentale è che il content sia sempre più piccolo del container.
Soffermiamoci un attimo sulla width del content: se il div o qualsiasi altro elemento occupasse già il 100% della larghezza ovviamente i margin-left: auto; e margin-right: auto; non avrebbero alcun effetto. Questo perché il valore “auto” della proprietà si può parafrasare con “utilizza lo spazio rimanente (al netto della larghezza del content)”. Infatti, per esempio, utilizzando solo margin-left: auto; si spingerebbe il content all’estremità destra.

Centrare verticalmente

.container {
  [...]
  display: table-cell;
  vertical-align: middle;
}

Una volta assegnata al container la proprietà display: table-cell;, per centrare verticalmente il div content è sufficiente aggiungere al container vertical-align: middle;, così come si fa in un <td> di una tabella.

2. Position: absolute e transform: translate

Un altro modo per centrare un div è sfruttare il position: absolute; di un div all’interno di un container. Questa proprietà permette di gestire liberamente la posizione di un elemento nello spazio del parent con position: relative; più vicino (anche qui non è il caso di approfondire. Sappiate solo che è sufficiente assegnare la proprietà position: relative; al parent).

Centrare orizzontalmente e verticalmente

.container {
  [...]
  position: relative;
}

.content {
  [...]
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

L’approccio per centrare orizzontalmente e verticalmente il div content è lo stesso. Si assegna la proprietà position: absolute; e le proprietà top: 50%; e left: 50%; al div content: così facendo si sposta il div, o meglio, il vertice in alto a sinistra del div, al centro del parent, nel nostro caso il container. Il contesto di azione, è bene sottolinearlo, è quello del container: infatti lo spostamento avviene all'interno del suo spazio. La proprietà transform: translate(-50%, -50%); invece agisce in un contesto diverso, quello relativo al div content: applicandola si sposta il content di -50% della sua altezza verso l’alto e di -50% della sua larghezza verso sinistra. Il valore è negativo perché l’asse cartesiano x di riferimento è verso destra e l’asse y verso il basso.

3. Flexbox

Da quando è stata introdotta, display: flex; ha rivoluzionato il posizionamento monodimensionale degli elementi, rendendolo più facile e controllabile con poche righe di codice. Ci permette di gestire un layout flessibile, come dice il nome, che adatta la larghezza degli elementi nello spazio a disposizione, rendendo talvolta superflue anche le media query. Anche nel caso di centratura orizzontale e verticale semplifica notevolmente la vita degli sviluppatori: bastano due regole semplici e immediate. In futuro poi affronteremo il tema flexbox in modo più approfondito.

Centrare orizzontalmente

.container {
  [...]
  display: flex;
  justify-content: center;
}

Dopo aver dato il display: flex; al parent, container nel nostro esempio, sarà sufficiente aggiungere alla stessa regola la proprietà justify-content: center; (Attenzione sempre ai valori di width). Voilà.

Centrare verticalmente

.container {
  [...]
  display: flex;
  justify-content: center;
  align-items: center;
}

Nella stessa regola dichiarata per la centratura orizzontale, aggiungiamo: align-items: center.

4. Grid

Così come flex è il riferimento per il posizionamento monodimensionale degli elementi, display: grid è il cardine dei layout più complessi e articolati. La regola è autoesplicativa: trasforma il div in una griglia di cui è possibile controllare tutte le caratteristiche, oltre che disporre il contenuto come si preferisce. La griglia è inoltre già responsive e in molti casi evita di aggiungere righe e righe di media queries.

Centrare orizzontalmente

.container {
  [...]
  display: grid;
  justify-items: center;
}

L’approccio è lo stesso del punto precedente: assegniamo il display: grid al div container. Alla stessa regola aggiungiamo anche la proprietà justify-items: center.

Centrare verticalmente

.container {
  [...]
  display: grid;
  justify-items: center;
  align-items: center;
}

Alla stessa regola (quindi sempre al div parent), aggiungiamo la regola align-items: center.

Centrare orizzontalmente e verticalmente

.container {
  [...]
  display: grid;
  place-items: center;
}

La proprietà place-items: center è uno shorthand che sostituisce le due precedenti. Applicandola si posiziona direttamente il contenuto al centro dalla cella della griglia.

Conclusioni

Come hai visto centrare orizzontalmente e verticalmente un div è molto facile, serve solo un po' di dimestichezza. Il mio consiglio però rimane lo stesso: rivolgiti sempre a un professionista per mettere mano al codice ed evitare di distruggere il layout del tuo sito; anche una sola virgola fuori posto potrebbe innescare la catastrofe! Il CSS ha ancora tanti segreti da scoprire e questo è solo il primo articolo sulllo sviluppo web. Seguimi su Facebook, Instagram e Linkedin per tenerti sempre aggiornati sui nuovi contenuti che usciranno sul sito.

Alla prossima!