Centratura in CSS

Segui 5 tecniche di centratura durante una serie di test per capire qual è la più resiliente al cambiamento.

Adam Argyle

Centrare i CSS è una sfida famigerata, piena di battute e prese in giro. 2020 I CSS sono cresciuti e ora possiamo ridere di queste battute onestamente, non attraverso denti stretti.

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

La sfida

Esistono diversi tipi di centratura. Sono diversi i casi d'uso e molti altri al centro ecc. Per dimostrare la motivazione di "una vittoria" di centratura, ha creato The Resilience Suoneria. È una serie di prove di stress per ogni centratura e la tua strategia per raggiungere un equilibrio tra te e te per osservarne il rendimento. Alla fine, rivelo la tecnica con i punteggi più alti, nonché una "più preziosa". Speriamo che tu riesca a comprendere le nuove tecniche e soluzioni di centratura.

Suoneria della resilienza

Il Ringer per la resilienza è una rappresentazione delle mie convinzioni secondo cui dovrebbe essere resiliente ai layout internazionali, alle aree visibili con dimensioni variabili, alle modifiche del testo e alle contenuti. Questi principi hanno contribuito a plasmare i seguenti test di resilienza per tecniche di supporto per perseverare:

1. Schiacciato: la centratura deve essere in grado di gestire le modifiche alla larghezza
2. Squadrato: la centratura dovrebbe essere in grado di gestire le modifiche all'altezza
3. Duplica: la centratura deve essere dinamica rispetto al numero di elementi
4. Modifica: il centro deve essere dinamico rispetto 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 schiacciati, compressi, duplicati, modificati e scambiati modalità lingua e indicazioni stradali. Centro affidabile e resiliente, un centro sicuro.

Legenda

Ho fornito alcuni suggerimenti visivi sui colori per aiutarti a conservare alcune meta informazioni nel contesto:

• Un bordo rosa indica la proprietà degli stili di centratura
• La casella grigia è lo sfondo del contenitore, che cerca di essere centrato articoli
• Ogni bambino ha un colore di sfondo bianco in modo da poter vedere eventuali effetti la tecnica di centratura ha le dimensioni delle caselle secondarie (se presenti)

I 5 concorrenti

5 tecniche di centratura entrano nel Ringer della resilienza, solo una riceverà il Corona di resilienza 👸.

1. Centro contenuti

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

Sarà difficile battere la concisione di display: grid e place-content in forma abbreviata. Poiché centra e giustifica collettivamente i bambini, è una tecnica di centratura solida per gruppi di elementi da leggere.

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

Ideale per layout macro contenenti paragrafi e titoli, prototipi o di solito ciò che richiede una centratura leggibile.

2. Dolce Flex

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

Gentle Flex è una strategia di centratura più realistica solo. È morbido e delicato, perché a differenza di place-content: center, le dimensioni della scatola per bambini non vengono modificate durante al centro. Nel modo più delicato 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:va bene.
4. Modifica: ottimo
5. Flusso:ottimo

Il container è impostato su Flex senza stili di allineamento, mentre gli elementi secondari diretti hanno lo stile dei margini automatici. C'è qualcosa di nostalgico e meraviglioso margin: auto lavora su tutti i lati dell'elemento.

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

Ideale per centrare icone o pseudo-elementi.

4. Centro morbido

1. Squish:scadente.
2. Squash: scadente
3. Duplicato:non valido.
4. Modifica: ottimo.
5. Flusso: ottimo! (purché utilizzi proprietà logiche)

Concorrente "fluffy center" è di gran lunga il nostro concorrente più gustoso, ed è l'unico di centratura interamente di proprietà dell'elemento o del bambino. Guarda il rosa che c'è in te bordo?!

.fluffy-center {
  padding: 10ch;
}

Ideale per centrare parole o frasi, tag, pillole, pulsanti, chip altro ancora.

5. Pop e Plop

1. Squish: Ok
2. Squash: OK
3. Duplicato:non valido.
4. Modifica: bene
5. Flusso:OK

Uno sballo perché il posizionamento assoluto rende l'elemento fuori dalla norma flusso di lavoro. Il "plop" parte del nome deriva quando lo trovo più utile: e posizionarlo sopra altre cose. Si tratta di un pratico e classico strumento di centratura in overlay flessibile e dinamica per le dimensioni dei contenuti. A volte serve solo per posizionare l'UI sopra altre.

Ideale per modali, toast e messaggi, filtri ed effetti di profondità e popover.

Il vincitore

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

[rullo di tamburi]

Flessibile dolce 🎉

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

Puoi sempre trovarla nei miei fogli di stile perché è utile sia per le macro micro-layout. È una soluzione affidabile a 360 gradi con risultati che corrispondono alle mie le aspettative. Inoltre, dato che sono un appassionato di taglie, tendo a laurearmi in questa soluzione. È vero, sono davvero tanti, ma i vantaggi che offre supera il codice aggiuntivo.

MVP

Centro soffice

.fluffy-center {
  padding: 2ch;
}

Fluffy Center è così micro che è facile trascurare come tecnica di centratura. ma è una delle mie strategie di centratura. È così atomico che a volte non lo sto usando.

Conclusione

Quali tipi di aspetti violano le tue strategie di centratura? Quali altre sfide potrebbe essere aggiunto alla suoneria della resilienza? Ho preso in considerazione la traduzione e dell'altezza automatica sul container... che altro?

Ora che sai come ci ho fatto, come lo faresti?! Diversifica il nostro approccio e scoprire tutti i modi per creare sul web. Segui il codelab con questo post per crea il tuo esempio di centratura, proprio come quelli in questo post. Tweet me la tua versione e la aggiungo al Sezione Remix della community di seguito.

Remix della community

• Trucchi CSS con un post del blog