Centrare elementi con i CSS
Centrare elementi con i CSS
Extrowebsite

Centrare un elemento html, sia esso in linea o di blocco, o in verticale oppure allineato in orizzontale. Altra situazione: si desidera avere lo stesso elemento che sia perfettamente centrato, nella pagina, sia sull'asse X che sull'asse Y. Sono sempre di più le combinazioni di cui possiamo aver bisogno in una pagina web.

Nel presente articolo avremo modo di vedere sia il codice, sia tutta una serie di esempi per poter risolvere il tutto.

Centrare un elemento "inline" in orizzontale

Un elemento inline, sia esso testo o link, lo si allinea in orizzontale inserendolo in un elemento parent al quale va assegnata la proprietà text-align:center.

Sintassi HTML

<div class="parent">
Testo centrato orizzontalmente
</div>

Sintassi CSS

body{background:#5d7dc0;}

.parent{
background:#fff;
text-align:center;
}
Testo centrato orizzontalmente
Testo centrato orizzontalmente

Altro esempio di centratura orizzontale di elementi inline, potrebbe essere quello dei link a href.

Sintassi HTML

<div class="parent">
 <a href="#">Link uno</a>
<a href="#">Link due</a>
<a href="#">Link tre</a>
<a href="#">Link quattro</a> </div>

Sintassi CSS

.parent{
background:#fff;
text-align:center;
}

.parent a {
text-decoration: none;
background: #333;
border-radius: 3px;
color: #fff;
padding: 5px 8px;
margin-right:6px;
}
Elementi inline centrati orizzontalmente
Elementi inline centrati orizzontalmente

Centrare un elemento "di blocco" in orizzontale

È possibile centrare un elemento a livello di blocco dandogli margin-left e margin-right impostati su auto. Dichiarare anche la larghezza, altrimenti si estenderebbe per tutta la dimensione del viewport.

Sintassi HTML

<div class="center">
Elemento di blocco centrato in orizzontale
</div>

Sintassi CSS

.center {
margin: 0 auto;
width: 250px;
background: orange;
padding: 20px;
color: #111;
}
Elemento di blocco centrato in orizzontale
Elemento di blocco centrato in orizzontale

Centrare più elementi di blocco in orizzontale

Grazie a due differenti proprietà CSS display, è possibile centrare orizzontalmente due o più elementi a livello di blocco in una riga. Tali proprietà sono:

  1. display: inline-block
  2. display: flex

Gli elementi di blocco sono inseriti in un elemento parent al quale viene assegnata la proprietà text-align: center. Vediamo il primo esempio.

Sintassi HTML

<div class="parent">
<div>
Elemento di blocco centrato nella riga.
</div>

<div>
Elemento di blocco centrato nella riga.
</div>

<div>
Elemento di blocco centrato nella riga.
</div>
</div><!--parent-->

Sintassi CSS

.parent {
text-align: center;
background: #fff;
margin: 20px 0;
padding: 20px;
}

.parent div {
background:orange;
color: #111;
margin:10px;
padding: 10px;
max-width: 180px;
display: inline-block;
text-align: left;
}
Più elementi di blocco centrati in orizzontale
Più elementi di blocco centrati in orizzontale

Elementi di blocco centrati con la proprietà display: flex.

Sintassi HTML

<div class="flex-center">
<div>
Elemento di blocco centrato nella riga.
</div>
<div>
Elemento di blocco centrato nella riga.
</div>
<div>
Elemento di blocco centrato nella riga.
</div>
</div><!--flex-center-->

Sintassi CSS

.flex-center {
display: flex;
justify-content:center;
text-align: center;
background: #fff;
margin: 20px 0;
padding: 20px;
}

.flex-center div {
background:orange;
color: #111;
margin:10px;
padding: 10px;
max-width: 180px;
}
Elementi di blocco centrati in orizzontale  con display-flex
Elementi di blocco centrati in orizzontale con display: flex

Si possono centrare anche più elementi di blocco sovrapposti, sia con uguali dimensioni, sia con larghezze ed altezze differenti.

Sintassi HTML

<div class="parent">

<div>
Elemento di blocco centrato nella riga.
</div>

<div>
Elemento di blocco centrato nella riga.
</div>

<div>
Elemento di blocco centrato nella riga.
</div>

</div><!--parent-->

Sintassi CSS

.parent {
text-align: center;
background: #fff;
margin: 20px 0;
padding: 20px;
}

.parent div {
background:orange;
color: #111;
margin:10px auto;
padding: 10px;
text-align: left;
}

.parent div:nth-child(1){width:320px}

.parent div:nth-child(2){width:500px}

.parent div:nth-child(3){width:150px}
Elementi di blocco centrati in orizzontale e sovrapposti
Elementi di blocco centrati in orizzontale e sovrapposti

Centrare un elemento "inline" in verticale

Singola linea di testo

Un elemento "inline", oppure del semplice testo, appare centrato in verticale, assegnando padding uguale nella parte superiore ed inferiore.

.vertical{
padding-top: 30px;
padding-bottom: 30px;
}

Sintassi HTML

<div class="parent">
<a href="#">Testo</a>
<a href="#">centrato</a>
<a href="#">in</a>
<a href="#">verticale</a>
</div>

Sintassi CSS

.parent {
background: #fff;
margin: 20px 0;
padding: 50px;
text-align:center;
}

.parent a {
background: orange;
color: #111;
padding: 40px 30px;
text-decoration: none;
}
Testo centrato in verticale
Testo centrato in verticale

Se il padding non è presente quale proprietà CSS, c'è un altro trucco che si può mettere in pratica per centrare verticalmente una riga di testo in un elemento parent.

.parent {
height: 100px;
line-height: 100px;
white-space: nowrap;
}

Sintassi HTML

<div class="parent">
Linea di testo centrata in verticale
</div>

Sintassi CSS

.parent {
height: 100px;
line-height: 100px;
padding:0 20px;
white-space: nowrap;
background:orange;
width:400px;
color:#111;
margin:0 auto;
}
Linea di testo centrata in verticale
Linea di testo centrata in verticale

Centrare in verticale più linee di testo

Assegnare uguale padding, ad un elemento parent, in alto ed in basso, può dare l'effetto del testo centrato quando questo si estende su più righe. Se non si ottiene l'effetto desiderato, il parent potrebbe essere una cella di tabella oppure assegnare delle proprietà CSS affinchè si comporti come se lo fosse.

La proprietà vertical-align gestisce l'allineamento verticale, a differenza della gestione dell'allineamento del testo su un'unica riga.

Sintassi HTML

<table>
<tr>
<td>
Molteplici linee di testo allineate verticalmente in una cella di tabella.
</td>
</tr>
</table>

Sintassi CSS

table {
margin: 0 auto;
background: #fff;
width: 200px;
height: 200px;
border-collapse: collapse;
}

table td {
background: orange;
color: #111;
padding: 20px;
border: 10px solid #fff;
/* allineamento di default vertical-align: middle; */
}
Righe di testo centrate in verticale in una cella di tabella
Righe di testo centrate in verticale in una cella di tabella

Altro esempio, inserire più righe di testo in un elemento al quale vengono conferite le caratteristiche di una cella di tabella, attraverso i CSS.

Sintassi HTML

<div class="parent">
<p>Molteplici linee di testo allineate verticalmente in un elemento creato come cella di tabella.</p>
</div>

Sintassi CSS

.parent {
margin: 0 auto;
display: table;
height: 200px;
background: white;
width: 200px;
}

.parent p {
display: table-cell;
margin:0;
background: orange;
color: #111;
padding: 20px;
border: 10px solid #fff;
vertical-align: middle;
}
Righe di testo centrate in verticale in un contenitore come cella di tabella
Righe di testo centrate in verticale in elemento trattato come cella di tabella

Se non si vuole ricorrere nè alle tabelle nè ad elementi formattate come tali, si può sempre raggiungere lo stesso risultato con la proprietà display: flex.

Sintassi HTML

<div class="parent-flex-vertical-center">
<p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>

Sintassi CSS

.parent-flex-vertical-center {
width:400px;
background: orange;
color: #111;
border: 10px solid #fff;
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
resize: vertical;
overflow: auto;
margin: 0 auto;
}

.parent-flex-vertical-center p {
margin: 0;
padding: 20px;
}
Testo allineato in verticale in contenitore display:flex
Testo allineato in verticale in contenitore display:flex

Notare bene che si ha il testo allineato in verticale, nell'ultimo esempio postato, solo se il parent contenitore ha un'altezza dichiarata (in px, in % ecc.)

Se queste tecniche non danno il risultato voluto, si può ricorrere al cosiddetto "elemento parent fantasma" nel quale uno pseudo elemento con altezza piena, dichiarata, è incluso in un contenitore ed il testo allineato verticalmente.

Sintassi HTML

<div class="parent-center">
<p>Testo su più righe centrato verticalmente in un contenitore. Introduzione dello <em>pseudo element</em> fantasma</p>
</div>

Sintassi CSS

.parent-center {
position: relative;
}

.parent-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}

.parent-center p {
display: inline-block;
vertical-align: middle;
width: 200px;
margin: 0 ;
padding: 20px;
background: orange;
color:#111;
}
Testo allineato in verticale in contenitore in contenitore pseudo-element fantasma
Testo allineato in verticale in contenitore pseudo-element "fantasma"

Allineare in verticale elementi "block-level"

Non conoscere l'altezza di un elemento block-level, nel layout di una pagina, è prassi molto comune. I motivi sono molteplici.

  • può cambiare la larghezza ed automaticamente cambia anche l'altezza
  • la dimensione del font e la quantità di testo sono fattori che modificano l'altezza
  • elementi con aspect-ratio fisso, quale potrebbe essere una immagine, può modificare l'altezza quando viene ridimensionata

Se si conosce l'altezza di un elemento block-level, si potrebbe procedere nel seguente modo:

.elemento-padre { position: relative; }

.elemento-figlio {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;

Allineare in verticale elementi block-level con altezza definita

Il caso più semplice è sicuramente quello in cui si conosce l'altezza dell'elemento block-level da centrare verticalmente. Infatti abbiamo:

Sintassi HTML

<div class="parent"> 
<div class="child">
Elemento di blocco con altezza fissa, centrato in verticale all'interno del <em>parent</em>.
</div>
</div>

Sintassi CSS

.parent {
background: #fff;
width: 300px;
height: 300px;
margin: auto;
position: relative;
}

.parent .child {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
height: 120px;
margin-top: -60px;
background: orange;
color:#111;
padding:20px;
}
Elemento block level centrato in verticale con altezza fissa
Elemento block level centrato in verticale con altezza fissa

Allineare in verticale elementi block-level con altezza sconosciuta

Il caso più comune, e spesso più spinoso, è quello in cui di un elemento block-level non si conosce la sua altezza. La regola CSS da applicare è la seguente:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Sintassi HTML

<div class="parent"> 
<div class="child">
Elemento block-level con altezza sconosciuta, centrato verticalmente all'interno del suo elemento parent.
</div>
</div>

Sintassi CSS

.parent {
background: #fff;
width: 300px;
height: 300px;
margin: 20px auto;
position: relative;
}

.parent .child {
position: absolute;
top: 50%;
left: 20px;
right: 20px;
background: orange;
color: #111;
padding: 20px;
transform: translateY(-50%);
}
Elemento block level centrato in verticale con altezza sconosciuta
Elemento block level centrato in verticale con altezza sconosciuta

Con il CSS Flexible Box Layout Module, altrimenti conosciuto come flexbox, allineare in verticale un elemento con altezza ignota è molto più semplice.

la sintassi è la seguente:

.parent {
display: flex;
flex-direction: column;
justify-content: center;
}

Sintassi HTML

<div class="parent"> 
<div class="child">
Elemento block-level con altezza sconosciuta, centrato verticalmente all'interno del suo elemento parent.
</div>
</div>

Sintassi CSS

.parent {
background: #fff;
height: 300px;
width: 300px;
padding: 20px;
margin: 20px auto;
display: flex;
flex-direction: column;
justify-content: center;
}

.parent .child {
background: orange;
color: #111;
padding: 20px;
}
Elemento block level centrato in verticale con altezza sconosciuta e display flex
Elemento block level centrato in verticale con altezza sconosciuta e display: flex

Centrare elementi block-level in verticale ed orizzontale

E' possibile combinare tutte le tecniche fino ad ora viste per centrare elementi block-level sia in verticale che in orizzontale all'interno di una pagina web.

Elemento block-level con altezza e largezza assegnata

Utilizzando i margini negativi pari alla metà della larghezza e dell'altezza dell'elemento child, sarà possibile centrarlo in verticale ed in orizzontale all'interno del suo elemento contenitore.

La sintassi è simile alla seguente:

.parent {
  position: relative;
}

.child {
width: 300px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -150px;
}

Sintassi HTML

<div class="parent">
<div class="child">
Elemento block-level con altezza nota centrato verticalmente, e margini negativi, all'interno del suo elemento parent.
</div>
</div>

Sintassi CSS

.parent {
background:#fff;
position: relative;
width:40%;
height:300px;
}

.child {
width: 300px;
height: 150px;
padding: 20px;
background: orange;
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -150px;
}
Elemento block level centrato in verticale con margini negativi
Elemento block level centrato in verticale con margini negativi

Elemento block-level con altezza e larghezza sconosciute

Se non si conosce la larghezza o l'altezza è possibile utilizzare la proprietà transform ed uno spostamento negativo pari al 50% in entrambe le direzioni (top e left).

La sintassi è simile alla seguente:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Sintassi HTML

<div class="parent"> 
<div class="child">
Elemento block-level con dimensioni sconosciute, centrato in verticale ed orizzontale nel suo parent.
</div>
</div>

Sintassi CSS

.parent {
position: relative;
background:#fff;
height: 200px;
width: 40%;
margin: 50px auto;
}

.parent .child {
background: orange;
color: #111;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
padding:15px;
}
Elemento block level centrato in verticale ed orizzontale con proprietà transform translate
Elemento block level centrato con proprietà transform: translate

Elemento block-level centrato con flexbox

Per allineare un elemento block-level in entrambe le direzioni, è possibile farlo anche con CSS Flexible Box Layout Module. E' necessario utilizzare due proprietà per la centratura:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Sintassi HTML

<div class="parent"> 
<div class="child">
Elemento block-level con dimensioni sconosciute, centrato in verticale ed orizzontale nel suo parent.
</div>
</div>

Sintassi CSS

.parent {
background: #fff;
height: 200px;
width: 40%;
margin: 50px auto;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}

.parent .child {
background: orange;
color: #111;
width: 50%;
padding: 20px;
}
Elemento block level centrato con display flex
Elemento block level centrato con proprietà display: flex