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 Il CSS è cresciuto e ora possiamo ridere di queste battute senza imbarazzo.

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

La sfida

Esistono diversi tipi di centratura. Da casi d'uso diversi, numero di elementi da centrare e così via. Per dimostrare il ragionamento alla base di una tecnica di centratura "vincente", ho creato The Resilience Ringer. Si tratta di una serie di stress test per ogni strategia di centratura per bilanciare il rendimento e osservarne il rendimento. 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. Schiacciato: 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: il 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 macro layout contenenti paragrafi e titoli, prototipi o, in generale, elementi che richiedono un centro leggibile.

2. Flessione dolce

1. Squish: ottimo.
2. Squash: ottimo.
3. Duplica: ottimo.
4. Modifica: fantastico.
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 sia per i layout macro che micro.

3. Autobot

1. Squish: ottimo
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 nel lavorare su tutti i lati dell'elemento.margin: auto

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

Ideale per centrare icone o pseudo-elementi.

4. Centro soffice

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

Il concorrente "centro morbido" è di gran lunga il nostro concorrente dal suono più gradevole ed è l'unica tecnica di centratura interamente di proprietà dell'elemento/elemento secondario. 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: fine
5. Flusso: fine

Questo "si apre" perché il posizionamento assoluto fa uscire l'elemento dal normale flusso. La parte "plop" dei nomi deriva dal momento in cui lo trovo più utile: lo inserisco sopra altre cose. Si tratta di una tecnica di centratura dell'overlay classica e pratica, flessibile e dinamica in base alle 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…

[rullio 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 dimensionamento intrinseco, tendo a passare 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 mi dimentico 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 pulsante per l'altezza automatica del contenitore… 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