Come centrare un'immagine verticalmente e orizzontalmente con CSS

Molti sviluppatori lottano mentre lavorano con le immagini. Gestire la reattività e l'allineamento è particolarmente difficile, soprattutto centrare un'immagine al centro della pagina.

Quindi in questo post mostrerò alcuni dei modi più comuni per centrare un'immagine sia verticalmente che orizzontalmente utilizzando diverse proprietà CSS.

Ho esaminato le proprietà di visualizzazione e posizione CSS nel mio post precedente. Se non hai familiarità con queste proprietà, ti consiglio di controllare quei post prima di leggere questo articolo.

Ecco una versione video se vuoi provarla:

Centrare un'immagine orizzontalmente

Iniziamo centrando un'immagine orizzontalmente utilizzando 3 diverse proprietà CSS.

Allineamento del testo

Il primo modo per centrare un'immagine orizzontalmente è usare la text-alignproprietà. Tuttavia, questo metodo funziona solo se l'immagine si trova all'interno di un contenitore a livello di blocco come :

 div { text-align: center; } 

Margine: automatico

Un altro modo per centrare un'immagine è usare la margin: autoproprietà (per il margine sinistro e il margine destro).

Tuttavia, l'utilizzo margin: autoda solo non funzionerà per le immagini. Se è necessario utilizzare margin: auto, ci sono anche 2 proprietà aggiuntive che è necessario utilizzare.

La proprietà margin-auto non ha alcun effetto sugli elementi a livello di riga. Poiché il tag è un elemento inline, dobbiamo prima convertirlo in un elemento a livello di blocco:

img { margin: auto; display: block; }

In secondo luogo, dobbiamo anche definire una larghezza. Quindi i margini sinistro e destro possono prendere il resto dello spazio vuoto e autoallinearsi, il che fa il trucco (a meno che non gli diamo una larghezza del 100%):

img { width: 60%; margin: auto; display: block; }

Visualizzazione: Flex

Il terzo modo per centrare un'immagine orizzontalmente è usare display: flex. Proprio come abbiamo usato la text-alignproprietà per un contenitore, usiamo anche display: flexper un contenitore.

Tuttavia, l'utilizzo display: flexda solo non sarà sufficiente. Il contenitore deve anche avere una proprietà aggiuntiva chiamata justify-content:

div { display: flex; justify-content: center; } img { width: 60%; }

La justify-contentproprietà funziona insieme display: flex, che possiamo usare per centrare l'immagine orizzontalmente.

Infine, la larghezza dell'immagine deve essere inferiore alla larghezza del contenitore, altrimenti occupa il 100% dello spazio e quindi non possiamo centrarlo.

Importante: la display: flexproprietà non è supportata nelle versioni precedenti dei browser. Vedi qui per maggiori dettagli.

Centrare un'immagine verticalmente

Visualizzazione: Flex

Per l'allineamento verticale, l'utilizzo display: flexè di nuovo molto utile.

Considera un caso in cui il nostro contenitore ha un'altezza di 800 px, ma l'altezza dell'immagine è di soli 500 px:

div { display: flex; justify-content: center; height: 800px; } img { width: 60%; height: 500px; }

Ora, in questo caso, l'aggiunta di una singola riga di codice al contenitore align-items: center, fa il trucco:

div { display: flex; justify-content: center; align-items: center; height: 800px; }

La align-itemsproprietà può posizionare elementi verticalmente se utilizzata insieme a display: flex.

Posizione: proprietà assolute e di trasformazione

Un altro metodo per l'allineamento verticale è tramite positione transformproprietà insieme. Questo è un po 'complicato, quindi facciamolo passo dopo passo.

Passaggio 1: definizione della posizione assoluta

In primo luogo, cambiamo il comportamento di posizionamento dell'immagine da statica absolute:

div { height: 800px; position: relative; background: red; } img { width: 80%; position: absolute; }

Inoltre, dovrebbe essere all'interno di un contenitore posizionato relativamente, quindi aggiungiamo position: relativeal suo contenitore div.

Passaggio 2: definire le proprietà in alto e a sinistra

In secondo luogo, definiamo le proprietà in alto e a sinistra per l'immagine e le impostiamo al 50%. Questo sposterà il punto di partenza (in alto a sinistra) dell'immagine al centro del contenitore:

img { width: 80%; position: absolute; top: 50%; left: 50%; }

Passaggio 3: definire la proprietà di trasformazione

Ma il secondo passaggio ha spostato l'immagine parzialmente fuori dal suo contenitore. Quindi dobbiamo riportarlo dentro.

Definire una transformproprietà e aggiungere -50% ai suoi assi X e Y fa il trucco:

img { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Ci sono altri modi per centrare le cose orizzontalmente e verticalmente, ma ho spiegato i più comuni. Spero che questo post ti abbia aiutato a capire come allineare le tue immagini al centro della pagina.

Se vuoi saperne di più sullo sviluppo web, non esitare a visitare il mio canale Youtube per ulteriori informazioni.

Grazie per aver letto!