Articolo originale: https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/
Centrare gli oggetti è uno degli aspetti più difficili di CSS.
I metodi in sé non sono complicati da capire. Invece, è più a causa del fatto che ci sono molti modi di centrare gli oggetti.
Il metodo utilizzato può variare a seconda dell'elemento HTML che stai provando a centrare, o se lo stai centrando orizzontalmente o verticalmente.
In questo tutorial parleremo di come centrare diversi elementi orizzontalmente, verticalmente e sia orizzontalmente che verticalmente.
Come centrare orizzontalmente
Centrare elementi orizzontalmente è generalmente più facile che farlo verticalmente. Ecco alcuni elementi comuni che potresti voler centrare orizzontalmente e modi diversi per farlo.
Come Centrare del Testo con la Proprietà Text-Align Center di CSS
Per centrare del testo o dei link orizzontalmente, usa semplicemente la proprietà text-align con il valore center:
<div class="container">
<p>Hello, (centered) World!</p>
</div>p {
text-align: center;
}
Come Centrare un Div con Margin Auto in CSS
Usa la proprietà abbreviata margin con il valore 0 auto per centrare orizzontalmente elementi a livello di blocco, come un div:
<div class="container">
<div class="child"></div>
</div>.child {
...
margin: 0 auto;
}
Come Centrare Orizzontalmente un Div con Flexbox
Flexbox è il modo più moderno per centrare gli oggetti nella pagina, e rende la progettazione di layout responsivi molto più facile di quanto non fosse in passato. Tuttavia, non è completamente supportato da alcuni browser più vecchi come Internet Explorer.
Per centrare un elemento orizzontalmente con Flexbox, applica semplicemente display: flex e justify-content: center all'elemento genitore:
<div class="container">
<div class="child"></div>
</div>.container {
...
display: flex;
justify-content: center;
}
Come Centrare Verticalmente
Centrare elementi verticalmente senza metodi moderni come Flexbox può essere davvero un lavoro ingrato. Qui vedremo per prima cosa alcuni dei vecchi metodi per centrare gli oggetti verticalmente, poi mostreremo come farlo con Flexbox.
Come Centrare Verticalmente un Div in CSS con il Posizionamento Assoluto e i Margini Negativi
Per molto tempo questo è stato il modo migliore per centrare le cose verticalmente. Per questo metodo devi conoscere l'altezza dell'elemento che vuoi centrare.
Per prima cosa, imposta la proprietà position dell'elemento genitore a relative.
Poi, per l'elemento figlio, imposta la proprietà position a absolute e top a 50%:
<div class="container">
<div class="child"></div>
</div>.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Centra verticalmente */
position: absolute;
top: 50%;
}
Ma questo centra verticalmente solo il bordo superiore dell'elemento figlio.
Per centrare davvero l'elemento figlio, imposta la proprietà margin-top a -(half the child element's height):
.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Centra verticalmente */
position: absolute;
top: 50%;
margin-top: -25px; /* metà dell'altezza di questo elemento */
}
Come centrare Verticalmene un Div con Transform e Translate
Se non conosci l'altezza dell'elemento che vuoi centrare (o anche se la conosci) questo metodo è un trucco ingegnoso.
Questo metodo è molto simile al metodo dei margini negativi visto sopra. Imposta la proprietà position dell'elemento genitore a relative.
Nell'elemento figlio, imposta la proprietà position a absolute e imposta top a 50%. Adesso, invece di unsare un margine negativo per centrare davvero l'elemento figlio, usa semplicemente transform: translate(0, -50%):
<div class="container">
<div class="child"></div>
</div>.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
Nota che translate(0, -50%) è un'abbreviazione per translateX(0) and translateY(-50%). Potresti anche scrivere transform: translateY(-50%) per centrare l'elemento figlio verticalmente.
Come Centrare Verticalmente un Div con Flexbox
Come nella centratura orizzontale, Flexbox rende molto facile centrare gli oggetti verticalmente.
Per centrare un elemento verticalmente, applica display: flex e align-items: center all'elemento genitore:
<div class="container">
<div class="child"></div>
</div>.container {
...
display: flex;
align-items: center;
}
Come Centrare Verticalmente e Orizzontalmente allo Stesso Tempo
Come Centrare Verticalmente e Orizzontalmente un Div in CSS con il Posizionamento Assoluto e i Margini Negativi
Questo è molto simile al metodo per centrare un elemento verticalmente descritto sopra. Come l'ultima volta, dovrai conoscere la larghezza e l'altezza dell'elemento che vuoi centrare.
Imposta la proprietà position dell'elemento genitore a relative.
Poi imposta le proprietà position dell'elemento figlio a absolute, top a 50%, e left e 50%. Questo centra semplicemente l'angolo in alto a sinistra dell'elemento figlio verticalmente e orizzontalmente.
Per centrare davvero l'elemento figlio, applica un margine superiore negativo impostato a metà dell'altezza dell'elemento figlio, ed un margine negativo sinistro impostato a metà della larghezza dell'elemento figlio:
<div class="container">
<div class="child"></div>
</div>.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Centra verticalmente e orizzontalmente */
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* dai un margine top e left negativi per centrare davvero l'elemento */
}
Come Centrare Verticalmente e orizzontalmente un Div con Transform e Translate
Utilizza questo metodo per centrare verticalmente e orizzontalmente un elemento di cui non conosci le dimensioni esatte e non puoi usare Flexbox.
Per prima cosa, imposta la proprietà position dell'elemento genitore a relative.
Dopodiché, imposta la proprietà position dell'elemento figlio a absolute, top a 50%, e left a 50%.
Infine, usa transform: translate(-50%, -50%) per centrare l'elemento figlio:
<div class="container">
<div class="child"></div>
</div>.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Come Centrare Verticalmente e Orizzontalmente un Div con Flexbox
Flexbox è il modo più semplice per centrare un elemento sia verticalmente che orizzontalmente.
Questo è semplicemente solo una combinazione dei due metodi Flexbox precedenti. Quindi applica justify-content: center e align-items: center per centrare l'elemento/i figli/o orizzontamente e verticalmente:
<div class="container">
<div class="child"></div>
</div>.container {
...
display: flex;
justify-content: center;
align-items: center;
}
Questo è tutto ciò che ti serve sapere per centrare al meglio. Ora va' e centra tutti gli oggetti.