CSS Usando la trasformazione CSS

Esempio

Le trasformazioni CSS sono basate sulla dimensione degli elementi, quindi se non sai quanto è alto o largo il tuo elemento, puoi posizionarlo assolutamente al 50% dalla parte superiore e a sinistra di un contenitore relativo e tradurlo del 50% a sinistra e verso l'alto per centrarlo verticalmente e orizzontalmente.

Tieni presente che con questa tecnica, l'elemento potrebbe terminare con il rendering a un limite di pixel non intero, rendendolo sfocato. Vedere questa risposta in SO per una soluzione alternativa.

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

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

Visualizza l'esempio in JSFiddle

COMPATIBILITÀ DEL BROWSER CROSS

La proprietà di trasformazione ha bisogno dei prefissi per essere supportati dai browser più vecchi. I prefissi sono necessari per Chrome <= 35, Safari <= 8, Opera <= 22, Browser Android <= 4.4.4 e IE9. Le trasformazioni CSS non sono supportate da IE8 e versioni precedenti.

Ecco una dichiarazione di trasformazione comune per l'esempio precedente:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

Per maggiori informazioni vedi canIuse .

MAGGIORI INFORMAZIONI

  • L'elemento viene posizionato in base al primo genitore non statico ( position: relative , absolute o fixed ). Esplora di più in questo violino e questo argomento di documentazione .
  • Per il centraggio solo orizzontale, usa left: 50% e transform: translateX(-50%) . Lo stesso vale per il centraggio solo verticale: centro con top: 50% e transform: translateY(-50%) .
  • L'uso di elementi di larghezza / altezza non statici con questo metodo di centraggio può far sì che l'elemento centrato appaia schiacciato. Questo accade principalmente con elementi contenenti testo e può essere corretto aggiungendo: margin-right: -50%; e margin-bottom: -50%; . Guarda questo violino per maggiori informazioni.