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

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

Qual è quindi la soluzione migliore? 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 utilizzare 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 quella 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;
}