Metodi per centrare elementi in absolute

In questi giorni ho avuto modo di approfondire due metodi a me sconosciuti su come centrare elementi absolute in pagina. Vediamo di cosa tratta.
Metodi per centrare elementi in absolute

Diverse tecniche di centramento

In questi giorni ho avuto modo di approfondire due metodi a me sconosciuti su come centrare elementi absolute in pagina, cercherò quindi di riprendere il concetto già trattato in questo post: “Centrare elementi sprovvisti di larghezza e altezza” sperando di fare cosa utile 😉

Centrare in orizzontale e verticale con absolute

Ad essere sincero non conoscevo affatto questa modalità di centramento, basta una larghezza e un’altezza dichiarata e il tutto viene centrato con queste poche righe di stile:

margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:50%;
height:50%;
      

Vediamo di trovare una spiegazione a questo evento, in sostanza, come fa il blocco a centrarsi?

– Partiamo dalla prima proprietà, margin:auto, nel normale flusso dei contenuti se margin-top e margin-bottom sono settati su auto il loro valore è 0.

– La position:absolute interrompe il normale flusso come se il blocco non esistesse. A questo punto entrano in gioco le altre proprietà inerenti alla position: top, left, bottom e right che impostate tutte a 0 permettono al blocco di coprire tutto lo spazio disponibile del contenitore padre.

– A questo punto, dichiarando larghezza e altezza si impedisce al blocco di occupare l’intero spazio a disposizione e costringe al browser di calcolare il margin:auto all’interno degli spostamenti della position absolute, quindi centrare verticalmente entro i limiti stabiliti dal top:0, left:0, bottom:0 e right:0.

Per quanto riguarda la compatibilità con gli standard e il supporto sui diversi browser non dovrebbero esserci problemi visto l’utilizzo di normali proprietà css.

See the Pen Absolute Centering by Antonio Polese (@AntonioPolese) on CodePen.

Vantaggi

  • Cross-browser (Compreso IE8)
  • Nessun markup speciale
  • Responsive se usato con percentuali e min-/max-
  • Associare ad una classe per centrare qualsiasi contenuto
  • Sempre centrato a prescindere dai padding (senza usare box-sizing)
  • I blocchi possono essere facilmente ridimensionati
  • Funziona alla grande sulle immagini

Svantaggi

  • Occorre una height dichiarata
  • Si consiglia l’uso di overflow:auto per evitare la sforatura di contenti
  • Non funziona su Windows Phone

Centrare con absolute e transform

Un’altra tecnica per eseguire il centramento in absolute è l’uso della proprietà transform. In questo caso gli spostamenti (left e top) dei contenuti sono dichiarati in percentuale combinati con il valore translate. Da notare anche che la height non è dichiarata, questo è un vantaggio da non sottovalutare.

left: 50%;
margin: auto;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;

See the Pen Absolute Centering In CSS with transform by Antonio Polese (@AntonioPolese) on CodePen.

Vantaggi

  • Contenuti con altezza variabile
  • Richiede poco codice

Svantaggi

  • Non funziona su IE8
  • Richiede i vendor prefix
  • In alcuni casi i bordi ed il testo risultano sfocati
  • Bravi ragazzi, ho avuto più volte lo stesso problema, e ogni volta cerco sperando di trovare “LA” soluzione definitiva… La soluzione 2 col translate è la migliore in assoluto, ma… esatto… IE8… allora sono passato ad un sistema super “trash”. Un div esterno in position fixed con left, top ecc a 0, e dentro un bel div con display table ed annidato un altro con table-cell. Okay l’ho detto che è super trash ma… va su ie8, e se sei su mobile/tablet il contenuto si “blocca” in alto senza tagliare pezzi. Okay io non l’ho scritto 😛

    • Antonio Polese

      ahah, concordo con te, in ogni caso la colpa è sempre di IE8 🙂

      Grazie per la ottima segnalazione trash 😉

  • marcollo81

    Avete provato con i flexbox (Ultimo ritrovato in quanto a css)?
    Adesso i tempi sembrano essere maturi (se consideriamo IE > 9 ).
    Recentemente ho trovato questo
    http://hictech.github.io/cssPlusWebsite/

    • Stefano Vollono

      Si è un ottimo strumento, il problema è proprio quel IE<10
      … tempo fa scrivemmo anche un articolo per il blog Lobae. http://www.lobaedesign.com/blog/2014/01/17/il-modulo-flexbox/

      • marcollo81

        Bhè si ma IE < 10 significa circa il 7-8% dei browser al mondo….. e andrà sempre a calare. Poi la libreria credo sia orientata più alle web application che a siti web. Nel caso di web app ci si può permettere un bel if( IE < 10 ) { hai un browser paleolitico }.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github