CSS: box centrati

Centrare un box in orizzontale e in verticale con i CSS è sicuramente uno degli argomenti maggiormente discussi dagli sviluppatori. In questo articolo riassumerò le tecniche maggiormente usate per ottenere questo effetto con i CSS.

Box centrati in orizzontale

Per centrare un box in orizzontale è necessario utilizzare i margini orizzontali automatici sull'elemento selezionato:

#box {
	width: 400px;
	margin: 0 auto;
}

Box centrati in verticale

Per centrare un box in verticale sono necessarie le seguenti dichiarazioni:

#box {
	height: 400px;
	position: absolute;
	top: 50%;
	margin-top: -200px;
}

I requisiti sono i seguenti:

• altezza dichiarata
• positionamento assoluto tramite proprietà top impostata sul valore 50%
• margine superiore negativo con valore pari a metà dell'altezza totale dell'elemento, comprensivo di eventuali margini, padding e bordi verticali

Box centrati in orizzontale e in verticale

Per centrare un box in orizzontale e in verticale sono necessarie le seguenti dichiarazioni:

#box {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -200px 0 0 -200px;
}

I requisiti sono i seguenti:

• altezza e larghezza dichiarate
• positionamento assoluto tramite proprietà top e left impostata sul valore 50%
• margine superiore e sinistro negativi con valori pari a metà della larghezza e altezza totali dell'elemento, comprensivi di eventuali margini, padding e bordi verticali e orizzontali

Unità di misura

I risultati con misure in percentuale sono insoddisfacenti. Tuttavia, è possibile usare misure gli em con risultati del tutto analoghi ai pixel.