Come centrare un’immagine all’interno di un div

Come nel caso dell’allineamento orizzontale e verticale di un testo all’interno di un blocco, anche per centrare un’immagine ci sono diverse opzioni. 

1° opzione: centrare un’immagine con la proprietà position

2° opzione: centrare un’immagine con la proprietà line-height

Con questo metodo posso centrare un’immagine utilizzando text-align, line-height e vertical-align per centrarla orizzontalmente e verticalmente e settare le massime dimensioni che può assumere all’interno del div sfruttando le proprietà max-width e max-height.

L’immagine ha una dimensione (esempio) di 500×400 ma viene tagliata e centrata a 500×300 che sono i valori massimi ammessi. 
Vai alla demo

3° opzione: centrare un’immagine con la proprietà table

Vai alla demo.