Centrare una immagine orizzontalmente e verticalmente in un div con i CSS

I Cascading Style Sheets (CSS) costituiscono un ottimo metodo per centrare le immagini, blocchi di testo e persino l’intero layout. La maggior parte di queste proprietà sono stati introdotte nei CSS dalla versione 1 e funzionano benissimo con i CSS3. Il processo di allineamento al centro può essere molto utile per i web designer e l’uso delle proprietà dei CSS sono fondamentali per centrare qualsiasi elemnto HTML.

Centrare una immagine ed altri elementi con i CSS è una sfida per molti web designer all’inizio poiché esistono tanti modi diversi di farlo ma non tutte le tecniche funzionano su ogni elemento. Comunque sia imparare a centrare gli oggetti della pagina HTML con i CSS è fondamentale dal momento che l’elemento HTML CENTER è stato deprecato e non può essere più supportato in futuro.

Vediamo ora alcuni metodi di come implementare questa tecnica per centrare una immagine orizzontalmente e verticalmente in un div di una pagina HTML. Il primo metodo metodo è più tradizionale e utilizza alcune proprietà classiche dei CSS. Il secondo metodo è più avanzato e utilizza la proprietà “transform” dei CSS3 la quale applica una trasformazione 2D o 3D di un elemento html. Questà proprietà ci permette di ruotare, scalare, traslare, stretchare elementi. Nel nostro esempio applicheremo il valore “translate” alla proprietà “transform”. Translate definisce una traslazione 2D dell’oggetto in questione sull’asse X e sull’asse Y.

Metodo classico

Metodo CSS3

Compatibilità

• Chrome 36.0
• Internet Explorer 9.0 / 10.0
• Mozilla 16.0
• Safari 9.0
• Opera 23.0

Codice