margin: auto e la centratura orizzontale classica

Centrare gli elementi sul web è stato storicamente meno immediato di quanto sembri. Oggi Flexbox e Grid risolvono molti casi, ma una tecnica classica resta lo standard per un caso specifico: centrare i contenitori principali della pagina.

Il valore auto

Se ricordi la lezione sul Box Model, i margini (margin) sono lo spazio esterno trasparente che circonda la tua scatola.

Oltre a impostare un margine in pixel o percentuali, puoi assegnargli il valore speciale auto. Quando imposti un margine su auto, chiedi al browser: “Calcola tu tutto lo spazio rimanente e assegnalo a questo margine”.

La formula della centratura

Se a un contenitore largo meno del 100% dello schermo assegni sia margin-left: auto che margin-right: auto, il browser divide lo spazio vuoto rimanente in due parti uguali, spingendo la scatola al centro.

.container {
  /* 1. Definisci una larghezza limitata */
  width: 90%;
  max-width: 1200px;
  
  /* 2. Imposta i margini orizzontali in automatico */
  margin-left: auto;
  margin-right: auto;
}

Usando la proprietà scorciatoia vista in precedenza, i professionisti lo scrivono quasi sempre così:

.container {
  max-width: 1200px;
  /* Margine Alto/Basso a 0, Margine Sinistra/Destra su auto */
  margin: 0 auto; 
}

Perché non usare text-align: center?

Un errore comune tra i principianti è cercare di centrare un blocco (<div>, <section>) usando text-align: center; sul suo genitore.

• text-align: center; serve per centrare il contenuto testuale o elementi inline come link e immagini all’interno del contenitore. Non centra una scatola blocco rispetto alla pagina.

• margin: 0 auto; è lo strumento per centrare l’intera scatola fisica all’interno del suo genitore.

Ricorda: perché margin: auto funzioni orizzontalmente, l’elemento deve avere una larghezza definita (inferiore a quella del padre) e deve essere un elemento di tipo “blocco” (che vedremo approfonditamente a breve). Non ha effetto sui testi inline.