Centratura in CSS

Segui cinque tecniche di centratura durante una serie di test per scoprire quale è la più resistente al cambiamento.

Adam Argyle

Allineare al centro in CSS è una sfida nota, piena di battute e prese in giro. Nel 2020 i CSS sono cresciuti e ora possiamo ridere di queste battute onestamente, non con i denti stretti.

Se preferisci i video, ecco una versione di questo post su YouTube:

La sfida

Esistono diversi tipi di centratura. I diversi casi d'uso, il numero di elementi da centrare e così via. Per dimostrare la logica alla base di "una tecnica di centratura vincente", ho creato "Il Ringer della resilienza". Si tratta di una serie di stress test per ogni strategia di centratura per bilanciare il rendimento e osservarlo. Alla fine, svelo la tecnica di punteggio più alta, oltre a un "valore più alto". Ci auguriamo che tu abbia acquisito nuove tecniche e soluzioni di centratura.

La suoneria di resilienza

L'indicatore di resilienza è una rappresentazione della mia convinzione che una strategia di centratura dovrebbe essere resiliente a layout internazionali, aree visibili di dimensioni variabili, modifiche del testo e contenuti dinamici. Questi principi hanno contribuito a definire i seguenti test di resilienza per verificare la resistenza delle tecniche di centratura:

1. Schiacciata: la centratura dovrebbe essere in grado di gestire le modifiche alla larghezza
2. Schiacciato: il centro dovrebbe essere in grado di gestire le modifiche all'altezza
3. Duplica: la centratura deve essere dinamica in base al numero di elementi
4. Modifica: la centratura deve essere dinamica in base alla lunghezza e alla lingua dei contenuti
5. Flusso: la centratura deve essere indipendente dalla direzione del documento e dalla modalità di scrittura

La soluzione vincente deve dimostrare la sua resilienza mantenendo i contenuti al centro mentre vengono compressi, schiacciati, duplicati, modificati e scambiati in varie modalità e direzioni di lingua. Un centro affidabile e resiliente, un centro sicuro.

Legenda

Ho fornito alcuni suggerimenti di colore per aiutarti a mantenere alcune metainformazioni nel contesto:

• Un bordo rosa indica la proprietà degli stili di centratura
• La casella grigia è lo sfondo del contenitore che cerca di avere elementi centrati
• Ogni elemento secondario ha un colore di sfondo bianco, in modo da poter vedere eventuali effetti della tecnica di centratura sulle dimensioni delle caselle secondarie.

I 5 concorrenti

5 tecniche di centratura entrano nel campionato della resilienza, solo una riceverà la corona della resilienza 👸.

1. Centro contenuti

1. Squish: fantastico.
2. Squash: fantastico.
3. Duplica: ottimo.
4. Modifica: ottimo.
5. Flow: ottimo.

Sarà difficile battere la concisione di display: grid e la sigla place-content. Poiché centra e giustifica collettivamente gli elementi secondari, si tratta di una tecnica di centratura solida per gruppi di elementi destinati alla lettura.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

Ideale per i layout macro contenenti paragrafi e titoli, prototipi o, in generale, elementi che richiedono un centramento leggibile.

2. Flessione delicata

1. Squish: perfetto!
2. Squash: ottimo.
3. Duplicata: ottimo.
4. Modifica: ottimo.
5. Flusso: ottimo.

La strategia Gentle Flex è una strategia di centratura soltanto più realistica. È morbido e delicato, perché, diversamente da place-content: center, le dimensioni delle caselle per bambini non vengono modificate durante il centratura. Con la massima delicatezza possibile, tutti gli elementi vengono impilati, centrati e distanziati.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

È ideale per i layout macro e micro.

3. Autobot

1. Squish: perfetto
2. Squash: ottimo
3. Duplica: fine
4. Modifica: ottimo
5. Flusso: ottimo

Il contenitore è impostato su flessibile senza stili di allineamento, mentre gli elementi figlio diretti sono impostati con i margini automatici. C'è qualcosa di nostalgico e meraviglioso in margin: auto che lavora in tutti i lati dell'elemento.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

Ideale per centrare icone o pseudo-elementi.

4. Centro morbido

1. Squish: cattivo
2. Squash: scadente
3. Duplica: non valido
4. Modifica: ottimo.
5. Flusso: ottimo! (a condizione che tu utilizzi proprietà logiche)

Il "fluffy center" è di gran lunga il nostro concorrente più gustoso ed è l'unica tecnica di centratura interamente di proprietà di un elemento o di un bambino. Guarda il nostro bordo interno solo rosa.

.fluffy-center {
  padding: 10ch;
}

Ideale per centratura in base a parole o frasi, tag, pillole, pulsanti, chip e altro ancora.

5. Pop & Plop

1. Squish: ok
2. Squash: OK
3. Duplica: non valido
4. Modifica: bene
5. Flusso: fine

Questo "si apre" perché il posizionamento assoluto fa uscire l'elemento dal normale flusso. La parte "plop" del nome deriva quando lo trovo più utile: appoggiandolo sopra altre cose. Si tratta di una tecnica di centratura degli overlay classica e dinamica, flessibile e dinamica per le dimensioni dei contenuti. A volte è sufficiente inserire un'interfaccia utente sopra un'altra.

Ottimi per finestre modali, popup e messaggi, effetti di profondità e in pila, popup.

Il vincitore

Se fossi su un'isola e potessi avere una sola tecnica di centratura, sarebbe...

[rullo di tamburi]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Puoi sempre trovarlo nei miei fogli di stile perché è utile sia per i layout macro che per quelli micro. È una soluzione affidabile a tutto tondo con risultati in linea con le mie aspettative. Inoltre, dato che sono un appassionato di taglie, tendo a dedicarmi a questa soluzione. È vero, è molto da digitare, ma i vantaggi che offre superano il codice aggiuntivo.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center è così micro che è facile ignorarlo come tecnica di centratura, ma è un elemento fondamentale delle mie strategie di centratura. È così atomico che a volte dimentica di usarlo.

Conclusione

Quali tipi di elementi compromettono le tue strategie di centratura? Quali altre sfide potrebbero essere aggiunte al campanello di resilienza? Ho preso in considerazione la traduzione e un'opzione di altezza automatica nel container... cos'altro?

Ora che sai come ho fatto, come faresti? Diversifichiamo i nostri approcci e scopriamo tutti i modi per creare sul web. Segui il codelab associato a questo post per creare il tuo esempio di centratura, proprio come quelli in questo post. Twitta la tua versione e la aggiungerò alla sezione Remix della community di seguito.

Remix della community

• Trucchi CSS con un post del blog