Articolo originale: CSS Image Centering – How to Center an Image in a Div
Quando lavori sul front-end di una pagina web, a volte hai bisogno di centrare un'immagine all'interno di un div (contenitore).
Delle volte può risultare complesso e, a seconda di certe condizioni, a un certo punto un particolare metodo potrebbe non funzionare, lasciandoti in cerca di alternative.
In questo articolo, imparerai come centrare un'immagine in un div con CSS.
Come centrare un div con CSS
Puoi centrare un'immagine in un div in due modi: orizzontalmente e verticalmente. Quando combini questi due metodi, ottieni un'immagine completamente centrata:
Come impostazione predefinita, il contenuto web parte sempre dall'angolo dello schermo in alto a sinistra e procede da sinistra a destra – eccetto per alcune lingue come l'arabo che vanno da destra a sinistra.
Iniziamo vedendo come centrare orizzontalmente un'immagine all'interno di un div. Poi vedremo come centrarla verticalmente. Infine, vedremo come fare entrambe le cose insieme.
Come centrare orizzontalmente un'immagine in un div con text-align
Supponi di avere un div in cui hai posizionato un'immagine in questo modo:
<div class="container">
<img src="./fcc-logo.png" alt="FCC Logo" />
</div>
E di applicare dei semplici stili CSS in modo che l'immagine sia visibile:
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
}
.container img {
width: 100px;
}
Il metodo text-align non funzionerà in tutti i casi, dato che è usato tipicamente per centrare il testo. Ma quando hai un'immagine all'interno di un contenitore al livello di blocco come un div, allora questo metodo funziona:
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
text-align: center;
}
.container img {
width: 100px;
}
A questo scopo, devi aggiungere la proprietà text-align assieme al suo valore center al contenitore e non all'immagine stessa.
Come centrare orizzontalmente un'immagine in un div con margin: auto
Un altro metodo che puoi usare per centrare orizzontalmente un'immagine all'interno di un div (contenitore) è la proprietà margin con il valore auto.
L'elemento prenderà una larghezza (width) specificata, e lo spazio restante sarà diviso equamente tra i margini destro e sinistro.
Di solito questo metodo si applica all'immagine stessa e non al contenitore. Sfortunatamente, questa proprietà da sola non funziona. Per prima cosa, occorre specificare la larghezza che l'immagine dovrà assumere. In questo modo, la larghezza rimanente è nota e può essere divisa equamente.
In secondo luogo, img è un elemento inline e la proprietà margin: auto non influisce sugli elementi inline. Ciò significa che devi prima convertirlo in un elemento al livello di blocco con la proprietà display impostata su block.
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
}
.container img {
width: 100px;
margin: auto;
display: block;
}
Come centrare orizzontalmente un'immagine in un div con le proprietà position e transform
Un altro metodo che puoi usare per posizionare un'immagine orizzontalmente è la proprietà position insieme alla proprietà transform.
Questo metodo può essere complicato, ma funziona. Devi prima impostare la proprietà position del contenitore su relative e poi quella dell'immagine su absolute.
Una volta fatto ciò, puoi muovere l'immagine in qualsiasi posizione desideri usando le proprietà left, top, bottom o right sull'immagine.
In questo caso, vuoi spostare l'immagine solo per centrarla orizzontalmente. Ciò vuol dire che devi spostare l'immagine con left al 50% o right a -50%:
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
}
Ma controllando l'immagine, noterai che non è ancora perfettamente posizionata al centro. Questo perché parte dal 50%, che è la posizione centrale.
In questo caso, devi usare la proprietà transform-translateX per regolarla e centrarla orizzontalmente alla perfezione:
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Come centrare orizzontalmente un'immagine in un div con display: flex
Flexbox rende semplice la progettazione di layout strutturali flessibili e responsivi senza usare float o il posizionamento. Possiamo anche usarlo per posizionare un'immagine al centro di un contenitore orizzontalmente tramite la proprietà display impostata sul valore flex.
Ma solo questo non è sufficiente. Occorre anche definire la posizione in cui mettere l'immagine. Ad esempio center, left o magari right:
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
display: flex;
justify-content: center;
}
.container img {
width: 100px;
height: 100px;
}
Nota: la proprietà display: flex non è supportata nelle vecchie versioni dei browser. Puoi leggere di più qui. Noterai anche che l'altezza e la larghezza dell'immagine sono definite per assicurare che l'immagine non rimpicciolisca.
E adesso impariamo come centrare un'immagine verticalmente in un div. In seguito vedremo come centrare un'immagine in un div orizzontalmente e verticalmente allo stesso tempo, ottenendo una centratura perfetta.
Come centrare verticalmente un'immagine in un div con display: flex
Allo stesso modo in cui sei stato in grado di centrare orizzontalmente un'immagine con il metodo display: flex, puoi fare lo stesso verticalmente.
Ma questa volta, non dovrai usare la proprietà justify-content. Invece userai la proprietà align-items:
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
display: flex;
align-items: center;
}
.container img {
width: 100px;
height: 100px;
}
Affinché il metodo funzioni, il contenitore deve avere un'altezza (height) specificata, che verrà usata per calcolare esattamente dove si trova il centro.
Come centrare verticalmente un'immagine in un div con le proprietà position e transform
In modo simile a come hai usato le proprietà position e transform precedentemente per centrare l'immagine orizzontalmente, puoi fare lo stesso verticalmente.
Stavolta, non userai left o right,. Invece userai top o bottom insieme a translateY piuttosto che translateX:
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Hai imparato come centrare un'immagine in un div orizzontalmente o verticalmente usando tutti i metodi possibili. Adesso impariamo come centrarla orizzontalmente e verticalmente allo stesso tempo.
Come centrare orizzontalmente e verticalmente un'immagine in un div con display: flex
La proprietà display: flex in combinazione con altre due proprietà consente di centrare l'immagine verticalmente e orizzontalmente.
Per questo metodo dovrai usare le proprietà justify-content e align-items impostate su center:
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
display: flex;
justify-content: center;
align-items: center;
}
.container img {
width: 100px;
height: 100px;
}
Come centrare orizzontalmente e verticalmente un'immagine in un div con le proprietà position e transform
Anche questo è molto simile, in quanto tutto ciò che devi fare è combinare la centratura verticale e orizzontale:
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Puoi anche combinare translateX e translateY usando translate(x,y):
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
position: relative;
}
.container img {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Conclusione
In questo articolo, hai imparato come centrare un'immagine in un div verticalmente, orizzontalmente oppure verticalmente e orizzontalmente in contemporanea.
Userai spesso il metodo Flexbox per postare un'immagine al centro, dato che il metodo position può distorcere la pagina web e ha un funzionamento ingannevole.
Puoi imparare altro sui metodi di posizionamento CSS qui e sul metodo flexbox qui.
Buona programmazione!