Una guida pratica alla centratura nei CSS

Come ho brevemente accennato nella mia introduzione alle funzioni matematiche dei CSS, dopo aver pubblicato l'utile articolo sui trucchi CSS, ho visto il traffico che arrivava a questo sito per parole chiave come "come centrare i CSS". Quindi, ha senso solo che alla fine abbia messo insieme un articolo del genere da solo.

Sono certo che il problema con la centratura delle cose usando i CSS non riguarda il ricordare il justify-content: center; proprietà. Ha più a che fare con il fatto che diverse strutture di layout hanno le proprie regole e potrebbero non rispettare un certo approccio.

Ma, prima di tutto, per chi è questa guida creata:

• Sviluppatori front-end che si sentono sopraffatti dalle "regole e regolamenti" dei CSS.
• Chiunque abbia difficoltà a centrare quel div una volta per tutte. Aaahhh!!
• Proprietari di siti Web che sono bloccati con modelli/temi strutturati male.

In CSS, il centraggio viene spesso definito Verticale, Orizzontale o Verticale e Orizzontale.

Puoi anche interpretarlo come Sinistra, Destra e Sinistra e Destra. E in alcuni casi, potresti anche vederlo chiamato Top & Bottom. Questi saranno anche i termini che useremo in questa guida. Detto questo, iniziamo con l'approccio più ricercato di tutti.

Inline & Block Elements: allineamento del testo

Una delle cose che all'inizio potrebbero non sembrare ovvie è che text-align: center; funziona per più di semplici paragrafi. Come proprietà, può essere applicata a qualsiasi elemento considerato un blocco. Ciò significa che finché il tuo contenuto è racchiuso in <div> o in un elemento simile, può essere centrato usando text-align .

CSS e HTML

 <style> .text-align-container { display: flex; } .text-align-container-style .item { background: #fff2ea; padding: 20px 0; text-align: center; width: 100%; } </style> <div class="text-align-container text-align-container-style"> <div class="item">Hi, I am centered.</div> </div>

La cosa bella di questo approccio è che funziona sia per Grid che per Flexbox. Finché avvolgi il contenuto all'interno del div, funzionerà altrettanto bene per contenuti come le immagini.

E funziona bene anche con le liste:

Vediamo cosa succede se proviamo a centrare un elemento <span> senza prima racchiuderlo in un contenitore di blocchi.

CSS e HTML

 .span-demo-container { background: #fff2ea; padding: 20px 0; width: 100%; } .span-demo-center { text-align: center; } <div class="span-demo-container"> <span class="span-demo-center">Am I in the center?</span> </div>

E il risultato è:

Il motivo per cui questo elemento <span> non è centrato è perché è un elemento inline. Per gli elementi inline, vuoi sempre impostare un genitore .

Quindi, se torniamo indietro e prendiamo la classe span-demo-center e la applichiamo al <div> , il risultato sarà questo:

Se lavori con una base di codice di grandi dimensioni o utilizzi un modello strutturato male, questo è in genere il motivo principale per cui la centratura non funziona. Pertanto, controlla sempre gli elementi block e inline e verifica se sono nidificati correttamente.

Centraggio di elementi di blocco con larghezza fissa

Un altro metodo popolare per centrare gli elementi consiste nell'usare margin: auto; , che è più comunemente usato per elementi di blocco con una larghezza fissa.

Quindi, pensa a un div personalizzato all'interno di un contenitore più grande. E poi stai cercando di inserire il contenuto all'interno di quell'elemento div personalizzato e di averlo centrato.

Facciamo un esempio dal vivo per vederlo in azione:

CSS e HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner { width: 200px; padding: 1rem; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <div class="margin-auto-inner">Div & Text centered.</div> </div>

In questo esempio, la classe margin-auto-container prende il contenitore da questo post del blog, quindi creiamo una nuova classe chiamata margin-auto-inner e vi applichiamo una larghezza fissa con uno stile personalizzato. Infine, applichiamo margin: 0 auto; per assicurarci che il nostro contenitore interno rimanga centrato rispetto al contenitore principale.

 Perché lo 0? Aggiungiamo lo 0 perché vogliamo lasciare il margine verticale (in alto e in basso) così com'è e applicare il margine automatico alla vista orizzontale (destra e sinistra). Puoi modificarlo per specificare margini individuali come "margin: 25px auto 50px;" che lascerebbe un margine di 25px in alto e un margine di 50px in basso.

Importante: il motivo del tuo margine: auto; non è centrato è perché non hai impostato una larghezza fissa per l'elemento che stai cercando di centrare.

Specifichiamo anche text-align: center; poiché questo centra il testo all'interno del contenitore interno .

Centratura di elementi in linea con larghezza fissa

Nel caso di un elemento inline, la larghezza personalizzata viene ignorata.

Diamo un'occhiata a una demo:

CSS e HTML

 .margin-auto-container { background: #fff2ea; padding:1rem; } .margin-auto-inner-span { width: 150px; padding: 5px; background: #efba93; color: #fff; margin: 0 auto; text-align: center; } <div class="margin-auto-container"> <span class="margin-auto-inner-span">Inline <span> element with custom width. (Not centered).</span> </div>

E il risultato è:

Come puoi vedere, nonostante l'impostazione margin: auto; l'elemento inline span non è centrato.

Fortunatamente, c'è una soluzione facile per questo. Aggiungendo display: block; proprietà alla nostra classe margin-auto-inner-span – possiamo dire al browser che vogliamo che quell'elemento specifico venga trattato come un blocco . E ora dovrebbe essere centrato:

A questo punto ti starai chiedendo quali elementi HTML sono considerati Blocks e quali Inline . Comprensibile. Consiglio di guardare il riferimento MDN:

• Elementi a livello di blocco
• Elementi in linea

Se conosci la differenza tra Inline e Block, sarà molto più facile trovare la soluzione di centraggio adatta al tuo problema.

Grid & Flexbox: il modo moderno

Grid e Flexbox sono i due moduli di layout utilizzati nel moderno web design. Mentre Flexbox è un sistema di layout unidimensionale, Grid si basa su un approccio bidimensionale.

E il centraggio di un div per entrambi i layout può essere eseguito con solo due righe di codice.

Verticale e orizzontale: una soluzione universale

Per entrambi i layout Grid e Flexbox, puoi utilizzare place-content: center; proprietà.

CSS e HTML

 .center-div-grid-layout { display: grid; /* display: flex; */ place-content: center; } <div class="center-div-grid-layout">It's that easy.</div>

La proprietà place-content è una scorciatoia per align-content & justify-content .

Con place-content puoi eseguire una moltitudine di variazioni di posizionamento, a seconda dello stile di un layout con cui stai lavorando:

Per un riferimento completo, consultare questa pagina MDN.

Nel complesso, esiste un numero molto ridotto di casi limite in cui le tecniche di centraggio delineate non sarebbero sufficienti. Se stai lavorando con un layout antico, la soluzione migliore è trovare incongruenze nei nomi delle classi all'interno del foglio di stile stesso. Quindi trova un modo per annidare correttamente gli elementi in modo che la logica di centraggio specificata venga eseguita correttamente.

Centratura assoluta: trasforma

La proprietà di transform viene utilizzata quando si desidera che qualcosa sia centrato "morto al centro" - orizzontalmente e verticalmente (sinistra, destra, in alto, in basso).

CSS e HTML

 .transform-example-container { height: 150px; position: relative; background: #fff2ea; } .transform-example-container .transform-absolute { width: 300px; text-align: center; background: #efba93; color: #fff; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin: 0; padding: 10px 0; position: absolute; } <div class="transform-example-container"> <p class="transform-absolute">Example: CSS transform</p> </div>

Funziona impostando la posizione su assoluta per l'elemento figlio che desideri centrare.

È importante che l'elemento padre abbia la posizione relativa , altrimenti la proprietà transform utilizzerà il layout principale come suo padre.

Usiamo in alto e a sinistra per impostare la posizione relativa all'angolo in alto a sinistra. Dopodiché, l'elemento può essere portato al centro usando translate() .

Il margine e il riempimento devono essere impostati su 0, altrimenti si verificherà uno spostamento di posizione.

E questo conclude il nostro tutorial/riferimento. Se vuoi padroneggiare la centratura con CSS, avvia il tuo editor di codice preferito e inizia a mettere alla prova questi esempi.