Molti sviluppatori si trovano in difficoltà a lavorare con le immagini. Gestire la responsività e l'allineamento è particolarmente difficile, soprattutto centrare un'immagine al centro della pagina.

In questo post ti mostrerò alcuni dei modi più comuni per centrare un'immagine sia in verticale che in orizzontale, utilizzando diverse proprietà CSS.

Ecco uno schema interattivo su come centrare un'immagine in verticale e in orizzontale:

Ho analizzato le proprietà CSS Position e Display nel miei post precedenti. Se non hai familiarità con queste proprietà, ti consiglio di dar loro un'occhiata prima di leggere questo articolo.

Ecco una versione video:

Centrare un'Immagine Orizzontalmente

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

Text-Align

Il primo modo per centrare un'immagine in orizzontale è usare la proprietà text-align. Tuttavia, questo metodo funziona solo se l'immagine si trova all'interno di un contenitore a livello di blocco, come ad esempio un <div>:

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="your-image.jpg">
</div>

Margin: Auto

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

Tuttavia, il solo utilizzo di margin: auto non funzionerà per le immagini. Se hai bisogno di utilizzare margin: auto, è necessario utilizzare anche altre due proprietà.

La proprietà margin-auto non ha alcun effetto sugli elementi in linea. Poiché il tag <img> è un'elemento in linea, abbiamo prima bisogno di convertirlo in un'elemento a livello di blocco:

img {
  margin: auto;
  display: block;
}

In secondo luogo, è necessario definire una larghezza. In questo modo, i margini destro e sinistro possono occupare il resto dello spazio vuoto e allinearsi automaticamente, il che funziona (a meno che non si dia una larghezza del 100%):

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

Display: Flex

Il terzo modo per centrare un'immagine in orizzontale è quello di usare display: flex. Così come abbiamo usato la proprietà text-align per un contenitore, usiamo ugualmente display: flex per un contenitore.

Tuttavia, l'uso del solo display: flex non è abbastanza. Il contenitore deve anche avere in aggiunta una proprietà chiamata justify-content:

div {
  display: flex;
  justify-content: center;
}

img {
  width: 60%;
}

La proprietà justify-content funziona insieme con display: flex, che possiamo utilizzare per centrare l'immagine in orizzontale.

Infine, la larghezza dell'immagine deve essere inferiore alla larghezza del contenitore, altrimenti occupa il 100% dello spazio e non è possibile centrarla.

Importante: la proprietà display: flex non è supportata nelle vecchie versioni dei browser. Per maggiori informazioni guarda qui.

Centrare un'Immagine Verticalmente

Display: Flex

Per l'allineamento verticale, ancora una volta torna molto utile utilizzare display: flex.

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

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

img {
  width: 60%;
  height: 500px;
}

In questo caso, l'aggiunta di una singola riga di codice al contenitore, align-items: center, risolve il problema:

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

La proprietà align-items può posizionare gli elementi verticalmente se usata assieme con display: flex.

Position: Absolute & le Proprietà Transform

Un altro metodo per l'allineamento verticale è utilizzare le proprietà position e transform assieme. Quest'ultimo metodo è un po' complicato, quindi procediamo per gradi.

Passaggio 1: Definire Position Absolute

Per prima cosa, cambiamo il comportamento di posizionamento dell'immagine da static a 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: relative al suo contenitore div.

Passaggio 2: Definire le Proprietà Top & Left

In secondo luogo, definiamo le proprietà top e left dell'immagine e le impostiamo al 50%. Questo sposterà il punto di partenza (top-left) dell'immagine al centro del contenitore:

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

Passaggio 3: Definire la Proprietà Transform

Il secondo passaggio ha spostato l'immagine parzialmente al di fuori del suo contenitore. È quindi necessario riportarla all'interno.

La definizione di una proprietà transform e l'aggiunta di un -50% ai suoi assi X e Y sono sufficienti:

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

Esistono altri modi per centrare le immagini in orizzontale e in verticale, ma ho spiegato quelli più comuni. Spero che questo post ti abbia aiutato a capire come allineare le immagini al centro della pagina.

Se vuoi saperne di più sullo sviluppo web, visita il mio Canale Youtube.

Grazie per la lettura!