Articolo originale: CSS Vertical Align – How to Center a Div, Text, or an Image [Example Code]
Anche con l'aiuto di strumenti come CSS Grid e Flexbox, centrare gli elementi in CSS rimane un compito abbastanza complicato.
È il tema di molte battute e meme, e quando si riesce a centrare qualcosa con successo, di solito ci si vanta di averlo fatto.
Perché centrare elementi in CSS è così difficile?
Non è sempre facile lavorare con CSS. Ad esempio, allineare qualcosa orizzontalmente OPPURE verticalmente non è troppo difficile.
Si può impostare l'allineamento del testo centrato con text-align: center per un elemento a livello di linea e margin: 0 auto per un elemento a livello di blocco.
Ma se si prova a combinare sia l'allineamento verticale sia l'allineamento orizzontale, allora iniziano a comparire diversi problemi.
In questo tutorial, vedremo tre metodi diversi per centrare correttamente un div, un testo o un'immagine in CSS.
Come centrare un elemento con la proprietà CSS position
La proprietà CSS position accetta i valori relative, absolute, fixed e static (il valore di default). Quando viene impostata per un elemento, si possono poi utilizzare le proprietà top, right, bottom e left per quell'elemento.
Con una combinazione di valori assoluti e relativi si possono ottenere molte cose diverse e si possono utilizzare per centrare qualsiasi cosa.
Diamo un'occhiata ai frammenti di codice sottostanti, considerando alcuni esempi.
Come centrare il testo con la posizione in CSS
<div class="container">
<div class="centered-element">
<p>I'm a Camper, and I'm vertically centered</p>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
height: 400px;
border: 2px solid #006100;
}
.centered-element {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Come centrare un'immagine con la posizione in CSS
<div class="container">
<div class="centered-element">
<img src="freecodecamp.png" alt="centered" />
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
height: 400px;
border: 2px solid #006100;
}
.centered-element {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Il codice qui sopra ha reso il testo e l'immagine centrati verticalmente. Per ottenere un allineamento centrato sia verticale sia orizzontale, dobbiamo utilizzare un piccolo trucco in CSS. Dobbiamo impostare la proprietà top a 50% e aggiungere una traslazione per entrambi gli assi X e Y.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
height: 400px;
border: 2px solid #006100;
}
.centered-element {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Il testo ora appare così:
E l'immagine così:
Abbiamo usato la proprietà transform perché il figlio (con la classe centered-element) era leggermente spostato dal centro. translateY() lo sposta verticalmente al centro e la traslazione sugli assi X e Y (translate()) lo sposta al centro sia orizzontalmente sia verticalmente.
Come centrare un elemento con Flexbox in CSS
In CSS il metodo di layout Flexbox è in grado di gestire i layout in una dimensione (riga o colonna). Con Flexbox, è abbastanza semplice centrare un div, del testo o un immagine utilizzando solo tre righe di codice.
Ecco i frammenti di codice con gli esempi.
Come centrare del testo con Flexbox
<div class="container">
<div class="centered-element">
<p>I'm a Camper, and I'm vertically centered</p>
</div>
</div>
.container {
display: flex;
align-items: center;
height: 600px;
border: 2px solid #006100;
}
Come centrare un'immagine con Flexbox
<div class="container">
<div class="centered-element">
<img src="freecodecamp.png" alt="centered" />
</div>
</div>
.container {
display: flex;
align-items: center;
height: 600px;
border: 2px solid #006100;
}
Siamo riusciti ad ottenere un allineamento verticale in sole due righe di codice. Per rendere l'immagine e il testo centrati orizzontalmente, aggiungiamo justify-content: center.
<div class="container">
<div class="centered-element">
<p>I'm a Camper, I'm now vertically and horizontally centered</p>
</div>
</div>
<div class="container">
<div class="centered-element">
<img src="freecodecamp.png" alt="centered" />
</div>
</div>
.container {
display: flex;
align-items: center;
justify-content: center;
height: 600px;
border: 2px solid #006100;
}
Il testo ora appare così:
E l'immagine così:
Come centrare un elemento con Grid in CSS
Con Flexbox è abbastanza semplice centrare qualsiasi cosa, no? Ma con Grid è ancora più facile centrare tutto, perché bastano solo due righe di codice.
Come centrare del testo con Grid
<div class="container">
<div class="centered-element">
<p>I'm a Camper, and I'm vertically centered</p>
</div>
</div>
.container {
display: grid;
align-items: center;
height: 600px;
border: 2px solid #006100;
}
Come centrare un'immagine con Grid
<div class="container">
<div class="centered-element">
<img src="freecodecamp.png" alt="centered" />
</div>
</div>
.container {
display: grid;
align-items: center;
height: 600px;
border: 2px solid #006100;
}
Gli esempi qui sopra si occupano di centrare verticalmente gli oggetti. Per far sì che il testo e l'immagine siano anche centrati orizzontalmente, sostituiamo align-items con place-items – una combinazione di align-items e justify-content:
.container {
display: grid;
place-items: center;
height: 600px;
border: 2px solid #006100;
}
Il testo ora appare così:
E l'immagine così:
Come centrare un div, del testo o un'immagine in CSS senza contenitori
I tre metodi visti sopra ci permettono di centrare un div, del testo o un'immagine che sono racchiusi in un contenitore. Ma possiamo anche centrare un div, del testo o un'immagine senza contenitore.
Vediamo come fare.
Come centrare un div in CSS senza contenitore
<div class="container"></div>
div.container {
height: 300px;
width: 300px;
border: 2px solid #006100;
margin: 0 auto;
}
Come centrare del testo in CSS senza contenitore
<p>I'm a Camper, and I'm centered</p>
p {
text-align: center;
}
Come centrare un'immagine in CSS senza contenitore
<img src="freecodecamp.png" alt="centered" />
img {
display: block;
margin: 0 auto;
}
/* Applica il valore block alla proprietà display, un margine nullo in alto e in basso e un margine automatico a destra e a sinistra */
Conclusione
Spero che questo tutorial ti abbia fornito abbastanza elementi per allineare al centro verticalmente e orizzontalmente diversi elementi in CSS così che sia meno problematico nei tuoi progetti futuri.
Grazie per la lettura e continua a programmare!