Di solito le cose si trovano al centro dei siti web, giusto? Mettere le cose in primo piano è il modo migliore per attirare l’attenzione, quindi le persone, logicamente, cercano di farlo la maggior parte delle volte. Quindi mettere gli elementi al centro dovrebbe essere la cosa più semplice e ottimizzata da fare nello sviluppo web, giusto?
Giusto?
SBAGLIATO.
Ci sono così tanti modi per farlo, così tante opzioni eppure, in qualche modo, per qualche maledizione, ancora non funziona. È il manifesto delle lamentele sui CSS, e per una buona ragione. Ore e ore di ricerche su “come centrare i CSS”, “come centrare un div”, “come centrare un div al centro della pagina”, “come centrare un testo in html”, “centrare un div orizzontalmente e verticalmente” e l’elenco potrebbe continuare.
Niente dovrebbe essere così complicato.
Forse è così a causa dei vari e spesso confusi metodi (alcuni migliori, altri peggiori) che si trovano su internet. E forse le persone hanno bisogno di una guida quando si tratta di questo argomento.
Ecco quindi i metodi migliori per centrare gli oggetti nei CSS.
1. La soluzione di base. Questa soluzione funziona per gli elementi inline, inline-block, inline-table e inline-flex.
p { text-align: center }
2. Per centrare i blocchi
p {
margin-left: auto;
margin-right: auto;
width: 4em
}
Oppure
p {
margin: 0 auto;
width: 8em
}
3. Quando si parla di testo, un trucco da tenere a mente per la centratura è l’altezza della linea. Questo funziona meglio per il testo a riga singola. L’altezza della riga deve essere uguale all’altezza del contenitore. In questo modo:
p {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
Ma se si tratta di più righe, basta usare:
p {
display: inline-block;
vertical-align: middle;
}
4. Centrare le immagini è un po’ più complicato, quindi ci sono diverse soluzioni. La prima è
img {
display: block;
margin-left: auto;
margin-right: auto;
}
5. Questo è ottimo anche per le immagini
img {
max-width: 100%;
height: auto;
}
6. Un po’ più complicato, ma comunque buono per i modali.
section {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
7. La centratura va anche in verticale, non solo in orizzontale. È qui che possiamo vedere una varietà di opzioni e dove entra in gioco il salvatore chiamato flex display.
Quindi, quando si centrano le cose con flex, si può usare
div {
height: 10em;
display: flex;
align-items: center;
}
Ma tieni presente che devi impostare la direzione del flex. Quindi utilizza
flex-direction:row;
Per l’allineamento orizzontale O
flex-direction:column;
Per l’allineamento verticale
8. Sempre a proposito dell’utilizzo di flex, possiamo anche utilizzare combinazioni come
div {
height: 10em;
display: flex;
align-items: center;
justify-content: center
}
9. Naturalmente, la posizione assoluta può aiutarti a centrare gli oggetti sia in orizzontale che in verticale.
div {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
10. Una delle soluzioni più complicate è la visualizzazione dell’elemento come tabella. Funziona ancora a meraviglia, quindi non criticarla finché non la provi.
div {
display: table-cell;
vertical-align: middle;
}
11. Vuoi usare la griglia? In questo caso le cose sono molto più semplici. Hai solo bisogno di un wrapper con
body, html {
height: 100%;
display: grid;
}
E poi aggiungi questo al tuo elemento
div {
margin: auto;
}
Ce ne siamo persi qualcuno? Oppure hai altre soluzioni che non sono state elencate?