Allineare gli elementi in css può sembrare un'operazione semplice ed in parte è vero se stiamo allunando orizzontamene gli elementi, ma se vogliamo allunarli verticalmente le cose iniziano a complicarsi.

Per allineare verticalmente un elemento abbiamo a disposizione diverse strategie: possiamo utilizzare il modernissimo flexbox, usare qualche "hack" con la proprietà transform oppure impostare manualmente le varie dimensioni.

Qual'è quindi la soluzione migliore? Beh in realtà dipende molto dalle informazioni che abbiamo a disposizione sull'elemento e quanto dobbiamo renderlo responsive.

Caso 1: Elemento in-line con una sola riga

Una delle soluzioni più semplici, non facciamo altro che aggiungere un padding verso l'alto e verso il basso delle stessa dimensione. Se per qualche motivo non possiamo la proprietà padding possiamo utilizzare un contenitore per l'elemento e impostare la proprietà line-height all'altezza desiderata.

.item {
  padding-top: 20px;
  padding-bottom: 20px;
}

.container {
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
}

Caso 2: Elemento in-line con più righe

In questo caso possiamo provare ad utilizzare la stessa tecnica del padding sopra e sotto che abbiamo visto nell'esempio precedente ma se abbiamo un layout particolare e non possiamo utilizzare questa soluzione possiamo affidarci a flexbox:

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100px;
}

Caso 3: Elemento block con altezza fissa

Se conosciamo le dimensioni di un elemento possiamo sfruttare le proprietà height e margin per allinearlo correttamente:

.container {
  position: relative;
}

.item {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

In alternativa abbiamo la versione con le proprietà "moderne":

.container {
  position: relative;
}

.item {
  --item-height: 100px;
  position: absolute;
  top: calc(50% - (var(--item-height) / 2));
  height: var(--item-height);
}

Caso 4: Elemento block con altezza sconosciuta

Se non conosciamo l'altezza dell'elemento possiamo utilizzare questo hack con la proprietà transform:

.container {
  position: relative;
}

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Caso 5: Elemento block con flexbox

La soluzione più moderna e più semplice:

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