Allineare verticalmente un div di cui non conosciamo l’altezza in CSS

Per molto tempo è esistito il problema di allineare verticalmente un qualsiasi elemento HTML di cui non conosciamo l’altezza.
Per nostra fortuna sta iniziando ad essere maggiormente supportato Flexbox che ci permetterà di giocare maggiormente con gli allineamenti ma, nel frattempo, sono sufficienti 3 (e dico TRE) righe di CSS (esclusi i prefissi) per allineare qualsiasi elemento, anche di cui non sappiamo l’altezza, in CSS:

.centrato_verticalmente {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
}

La cosa assolutamente favolosa è che è supportato da praticamente tutti i browser attualmente utilizzati (e con questo intendo anche Internet Explorer 9, per l’8 nulla da fare).
Ora andate e centrateli tutti!

Matteo Currò

Autore: Mi chiamo , ho 30 anni e lavoro come freelance Web designer e Front-end developer aiutando startups e aziende a migliorare o a rivoluzionare la loro immagine nel web.