Come centrare orizzontalmente o verticalmente DIV CSS, con proprietà display: inline, display: inline-block o display: block

Prima di tutto si definiscono degli CSS di aiuto:

div.example {
	border: 2px solid red;
	margin: 2px;
	padding: 2px;
	overflow: hidden;
}
div.example span {
	border: 2px solid blue;
	margin: 2px;
	padding: 2px;
}
.inline-element {
	display: inline;
}
.inline-block-element {
	display: inline-block;
}
.block-element {
	display: block;
	width: 20%;
	text-align: left;
}
.block-element-full {
	display: block;
	text-align: left;
}

Tutti gli esempi che vengono illustrati in questa guida si basano su un contenitore parente e uno o più elementi figli. Modificando il CSS del contenitore e dei figli, questa guida cerca di raggiungere l'obbiettivo a volte difficile di centrare orizzontalmente o verticalmente gli elementi HTML.

Come centrare orizzontalmente gli elementi con proprietà display: inline


Centrare orizzontalmente un elemento inline

Questo compito risulta abbastanza facile, basta usare la proprietà text-align: center

<div style="
	height: 20vh;
	text-align: center;" class="example">
	<span class="inline-element">inline element 1 . . . . . . . . . .</span>
</div>
inline element 1 . . . . . . . . . .

Centrare orizzontalmente più elementi inline

Stesso comportamento del primo esempio.

<div style="
	height: 20vh;
	text-align: center;" class="example">
	<span class="inline-element">inline element 1 . . . . . . . . . .</span>
	<span class="inline-element">inline element 2 . . . . . . . . . .</span>
	<span class="inline-element">inline element 3 . . . . . . . . . .</span>
</div>
inline element 1 . . . . . . . . . . inline element 2 . . . . . . . . . . inline element 3 . . . . . . . . . .

Centrare orizzontalmente più elementi inline su più linee

Per fare si che più elementi si posizionino su più linee, si possono mettere dei ritorno a capo su tutti gli elementi figli tranne l'ultimo.

.center-inline-hor-parent-multi:not(:last-child)::after {
	content: '\A';
	white-space:pre-line;
}
<div style="
	height: 20vh;
	text-align: center;" class="example center-inline-hor-parent-multi">
	<span class="inline-element">inline element 1 . . . . . . . . . .</span>
	<span class="inline-element">inline element 2 . . . . . . . . . .</span>
	<span class="inline-element">inline element 3 . . . . . . . . . .</span>
</div>
inline element 1 . . . . . . . . . . inline element 2 . . . . . . . . . . inline element 3 . . . . . . . . . .

Come centrare orizzontalmente gli elementi con proprietà display: inline-block


Centrare orizzontalmente un elemento inline-block

Anche in questo caso basta usare la proprietà text-align: center

<div style="
	height: 20vh;
	text-align: center;" class="example">
	<span class="inline-block-element">inline block element 1 . . . . . . . . . .</span>
</div>
inline block element 1 . . . . . . . . . .

Centrare orizzontalmente più elementi inline-block

Stesso comportamento del primo esempio.

<div style="
	height: 20vh;
	text-align: center;" class="example">
	<span class="inline-block-element">inline block element 1 . . . . . . . . . .</span>
	<span class="inline-block-element">inline block element 2 . . . . . . . . . .</span>
	<span class="inline-block-element">inline block element 3 . . . . . . . . . .</span>
</div>
inline block element 1 . . . . . . . . . . inline block element 2 . . . . . . . . . . inline block element 3 . . . . . . . . . .

Centrare orizzontalmente più elementi inline-block su più linee

Questo caso è un pò più complesso, al contenitore parente si aggiunge la proprietà: white-space: pre-line che fà collassare le sequenze di spazi e manda a capo il testo ove vi è un ritorno a capo. Per non avere un ritorno a capo sul primo figlio si comentano o si eliminano eventuali spazi con il contenitore.

<div style="
	height: 20vh;
	text-align: center;
	white-space: pre-line;" class="example"><!--
	--><span class="inline-block-element">inline block element 1 . . . . . . . . . .</span>
	<span class="inline-block-element">inline block element 2 . . . . . . . . . .</span>
	<span class="inline-block-element">inline block element 3 . . . . . . . . . .</span>
</div>
inline block element 1 . . . . . . . . . . inline block element 2 . . . . . . . . . . inline block element 3 . . . . . . . . . .

Come centrare orizzontalmente gli elementi con proprietà display: block

Per questo gruppo bisogna impostare una larghezza per gli elementi figli predefinita.


Centrare orizzontalmente un elemento block

Per centrare orizzontalmente un elemento block basta impostare una larghezza definita per l'elemento figlio e impostare il margine sinistro e destro con il valore auto.

.center-block-hor-element {
	width: /* ... */;
	margin-left: auto;
	margin-right: auto;
}
<div style="
	height: 20vh;" class="example">
	<span class="block-element center-block-hor-element">block element 1 . . . . . . . . . .</span>
</div>
block element 1 . . . . . . . . . .

Centrare orizzontalmente più elementi block

Centrare orizzontalmente più elementi con proprietà display: block e mantenerli sulla stessa linea risulta un pò più complicato. Metterli sulla stessa linea vuole dire trasformarli in inline, mentre loro sono di tipo block. La soluzione che vi propongo presuppone che si conosca il numero di elementi figli e la largezza di ognuno di essi. Si usa la proprietà float e si calcola lo spazio a sinistra del elemento figlio. Un altra soluzione è quella di trasformare il tipo di display in inline o inline-block, quindi la soluzione si trova in uno degli esempi precedenti.

.center-block-hor-element-single {
	float: left;
	left: calc((100% - (3 /* numero elementi */ * 20% /* width elemento */)) / 2);
	position: relative;
}
<div style="
	height: 20vh;" class="example">
	<span class="block-element center-block-hor-element-single">block element 1 . . . . . . . . . .</span>
	<span class="block-element center-block-hor-element-single">block element 2 . . . . . . . . . .</span>
	<span class="block-element center-block-hor-element-single">block element 3 . . . . . . . . . .</span>
</div>
block element 1 . . . . . . . . . . block element 2 . . . . . . . . . . block element 3 . . . . . . . . . .

Centrare orizzontalmente più elementi block su più linee

Per centrare più elementi su più linee, basta usare lo stesso CSS del primo esempio di questo gruppo.

<div style="
	height: 20vh;" class="example">
	<span class="block-element center-block-hor-element">block element 1 . . . . . . . . . .</span>
	<span class="block-element center-block-hor-element">block element 2 . . . . . . . . . .</span>
	<span class="block-element center-block-hor-element">block element 3 . . . . . . . . . .</span>
</div>
block element 1 . . . . . . . . . . block element 2 . . . . . . . . . . block element 3 . . . . . . . . . .

Come centrare verticalmente gli elementi con proprietà display: inline


Centrare verticalmente un elemento inline

Per centrare verticalmente un unico elemento figlio si imposta la larghezza di linea uguale alla larghezza del contenitore parente e si imposta la propreità: white-space: nowrap, che fa si che gli elementi figli non vadano a capo.

<div style="
	height: 20vh;
	line-height: 20vh;
	white-space: nowrap;" class="example">
	<span class="inline-element">inline element 1 . . . . . . . . . .</span>
</div>
inline element 1 . . . . . . . . . .

Centrare verticalmente più elementi inline

Per centrare più elementi inline il CSS è lo stesso del caso di prima. Questo caso non è consigliato se la somma degli elementi è più larga della larghezza del display.

<div style="
	height: 20vh;
	line-height: 20vh;
	white-space: nowrap;" class="example">
	<span class="inline-element">inline element 1 . . . . . . . . . .</span>
	<span class="inline-element">inline element 2 . . . . . . . . . .</span>
	<span class="inline-element">inline element 3 . . . . . . . . . .</span>
</div>
inline element 1 . . . . . . . . . . inline element 2 . . . . . . . . . . inline element 3 . . . . . . . . . .

Centrare verticalmente più elementi inline su più linee

Si aggiunge un elemento figlio fittizio con visiblita hidden e si da un line-height a questo elemento. Si cancellano o si commentano eventuali spazi tra questo elemento e i suoi fratelli.

.parente {
	height: 20vh;
	white-space: pre-line;
}
.center-inline-vert-parent-multi span:first-child {
	line-height: calc((20vh / 2) - 3vh /* 1vh per numero elementi visibili */);
	visibility: hidden;
}
<div style="
	height: 20vh;
	white-space: pre-line;" class="example center-inline-vert-parent-multi"><!--
	--><span class="inline-element"></span>
	<span class="inline-element">inline element 1 . . . . . . . . . .</span>
	<span class="inline-element">inline element 2 . . . . . . . . . .</span>
	<span class="inline-element">inline element 3 . . . . . . . . . .</span>
</div>
inline element 1 . . . . . . . . . . inline element 2 . . . . . . . . . . inline element 3 . . . . . . . . . .

Come centrare verticalmente gli elementi con proprietà display: inline-block


Centrare verticalmente un elemento inline-block

Come nei casi inline anche per l'inline-block si aggiunge un elemento figlio fittizio con visiblita hidden. Si fà un calcolo della lungezza della linea che varia a seconda dei casi. In questo caso è la metà della lunghezza del parente.

.center-inline-block-vert-parent span:first-child {
	visibility: hidden;
	border: none;
	margin: 0;
	padding: 0;
}
.center-inline-block-vert-element {
	transform: translateY(-50%);
}
<div style="
	height: 20vh;
	white-space: pre-line;" class="example center-inline-block-vert-parent"><!--
	--><span style="line-height: calc(20vh / 2);" class="inline-block-element"> </span>
	<span style="transform: translateY(-50%);" class="inline-block-element">inline block element 1 . . . . . . . . . .</span>
</div>
  inline block element 1 . . . . . . . . . .

Centrare verticalmente più elementi inline-block

Per centrare più elementi si usa lo stesso CSS del primo caso del gruppo. Si deve prestare attenzione ad eliminare o commentare gli spazi tra elementi figli.

<div style="
	height: 20vh;
	white-space: pre-line;" class="example center-inline-block-vert-parent"><!--
	--><span style="line-height: calc(20vh / 2);" class="inline-block-element"> </span>
	<span class="inline-block-element center-inline-block-vert-element">inline block element 1 . . . . . . . . . .</span><!--
	--><span class="inline-block-element center-inline-block-vert-element">inline block element 2 . . . . . . . . . .</span><!--
	--><span class="inline-block-element center-inline-block-vert-element">inline block element 3 . . . . . . . . . .</span>
</div>
  inline block element 1 . . . . . . . . . .inline block element 2 . . . . . . . . . .inline block element 3 . . . . . . . . . .

Centrare verticalmente più elementi inline-block su più linee

Parto subito col dire che questa non è una soluzione consigliata, è meglio trasformare il display degli elementi figli in block e quindi usare le soluzioni precedenti. Se si vuole comunque continuare con questa soluzione; per centrare più elementi su più linee si usa un CSS leggermente differente. Mettere gli elementi su più linee significa trasformarli ad un comportamento di tipo block, mentre loro sono di tipo inline-block. In questo caso basta non eliminare gli spazi dopo il primo elemento figlio, quello nascosto. Si usa translateY di -50% * numero elementi per spostare gli elementi verso l'alto. Il calcolo non risulta esatto perche vi sono anche i bordi, margini e padding in mezzo che andrebbero calcolati e magari inseriti nel calcolo di line-height.

.center-inline-block-vert-element-multi {
transform: translateY(-150%);
}
<div style="
	height: 20vh;
	white-space: pre-line;" class="example center-inline-block-vert-parent"><!--
	--><span style="line-height: calc(20vh / 2);" class="inline-block-element"> </span>
	<span class="inline-block-element center-inline-block-vert-element-multi">inline block element 1 . . . . . . . . . .</span>
	<span class="inline-block-element center-inline-block-vert-element-multi">inline block element 2 . . . . . . . . . .</span>
	<span class="inline-block-element center-inline-block-vert-element-multi">inline block element 3 . . . . . . . . . .</span>
</div>
  inline block element 1 . . . . . . . . . . inline block element 2 . . . . . . . . . . inline block element 3 . . . . . . . . . .

Come centrare verticalmente gli elementi con proprietà display: block


Centrare verticalmente un elemento block

Per centrare un elemento di tipo block, si usa una posizione relativa e si cerca attraverso le proprietà top e transform di posizionarlo centralmente.

.center-block-vert-element-single {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	float: left;
}
<div style="
	height: 20vh;
	position: relative;" class="example">
	<span class="block-element-full center-block-vert-element-single">block element 1 . . . . . . . . . .</span>
</div>
block element 1 . . . . . . . . . .

Centrare verticalmente più elementi block

Per centrare più elementi si usa lo stesso CSS del primo caso del gruppo. La differenza stà nel translateY che a differenza del primo caso è 50% * numero elementi figli.

.center-block-vert-element {
	position: relative;
	top: 50%;
	transform: translateY(-150%);
}
<div style="
	height: 20vh;
	position: relative;" class="example">
	<span class="block-element-full center-block-vert-element">block element 1 . . . . . . . . . .</span>
	<span class="block-element-full center-block-vert-element">block element 2 . . . . . . . . . .</span>
	<span class="block-element-full center-block-vert-element">block element 3 . . . . . . . . . .</span>
</div>
block element 1 . . . . . . . . . . block element 2 . . . . . . . . . . block element 3 . . . . . . . . . .

Centrare verticalmente più elementi block su più linee

Per centrare più elementi si usa lo stesso CSS del primo caso del gruppo.

<div style="
	height: 20vh;
	position: relative;" class="example">
	<span class="block-element-full center-block-vert-element-single">block element 1 . . . . . . . . . .</span>
	<span class="block-element-full center-block-vert-element-single">block element 2 . . . . . . . . . .</span>
	<span class="block-element-full center-block-vert-element-single">block element 3 . . . . . . . . . .</span>
</div>
block element 1 . . . . . . . . . . block element 2 . . . . . . . . . . block element 3 . . . . . . . . . .