Centralização no CSS

Acompanhe cinco técnicas de centralização enquanto elas passam por uma série de testes para saber qual é a mais resistente a mudanças.

Adam Argyle

Centralizar em CSS é um desafio conhecido, cheio de piadas e brincadeiras. 2020 O CSS cresceu e agora podemos rir dessas piadas de verdade, não com os dentes cerrados.

Se preferir vídeo, confira uma versão desta postagem no YouTube:

O desafio

Há diferentes tipos de centralização. De diferentes casos de uso, número de coisas a centralizar etc. Para demonstrar uma lógica por trás de uma técnica de centralização "vencedora", criei o Resilience Ringer. É uma série de testes de estresse para cada estratégia de centralização, com o objetivo de equilibrar o desempenho. No final, vou revelar a técnica com a maior pontuação e a "mais valiosa". Esperamos que você saia daqui com novas técnicas e soluções de centralização.

The Resilience Ringer

O Resilience Ringer é uma representação das minhas crenças de que uma estratégia de centralização precisa ser resiliente a layouts internacionais, janelas de visualização de tamanho variável, edições de texto e conteúdo dinâmico. Esses princípios ajudaram a moldar os seguintes testes de resiliência para que as técnicas de centralização perdurem:

1. Comprimido:o centralizador precisa lidar com mudanças na largura.
2. Compactado:o centralizador precisa lidar com mudanças na altura.
3. Duplicado:o alinhamento ao centro precisa ser dinâmico para o número de itens
4. Edição:o alinhamento ao centro precisa ser dinâmico de acordo com o tamanho e o idioma do conteúdo.
5. Fluxo:o alinhamento ao centro não deve depender da direção do documento nem do modo de escrita.

A solução vencedora precisa demonstrar resiliência mantendo o conteúdo no centro enquanto é comprimido, esmagado, duplicado, editado e trocado para vários modos e direções de idioma. Um centro confiável, resiliente e seguro.

Legend

Forneci algumas dicas visuais de cores para ajudar você a manter algumas metainformações em contexto:

• Uma borda rosa indica a propriedade dos estilos de centralização
• A caixa cinza é o plano de fundo do contêiner que busca ter itens centralizados.
• Cada filho tem uma cor de plano de fundo branca para que você possa ver os efeitos que a técnica de centralização tem nos tamanhos das caixas filhas (se houver).

Os 5 competidores

Cinco técnicas de centralização entram no Resilience Ringer, mas apenas uma vai receber a Coroa da resiliência 👸.

1. Central de conteúdo

1. Apertar: ótimo!
2. Squash: ótimo!
3. Duplicar: ótimo!
4. Editar: ótimo!
5. Fluxo: ótimo!

É difícil superar a concisão de display: grid e a abreviação place-content. Como ele centraliza e justifica as crianças coletivamente, é uma técnica de centralização sólida para grupos de elementos destinados à leitura.

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

Ideal para layouts macro com parágrafos e manchetes, protótipos ou geralmente coisas que precisam de centralização legível.

2. Gentle Flex

1. Apertar:ótimo!
2. Squash:ótimo!
3. Duplicar:ótimo!
4. Edição:ótimo!
5. Fluxo:ótimo!

O Gentle Flex é uma estratégia de centralização apenas mais fiel. Ele é suave e delicado porque, ao contrário do place-content: center, nenhum tamanho de caixa infantil é alterado durante o centralização. Todos os itens são empilhados, centralizados e espaçados da maneira mais suave possível.

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

Ótimo para layouts macro e micro.

3. Autobot

1. Apertar:ótimo
2. Squash:ótimo
3. Duplicata:multa
4. Editar:ótimo
5. Fluxo:ótimo

O contêiner é definido como flexível sem estilos de alinhamento, enquanto os filhos diretos são estilizados com margens automáticas. Há algo nostálgico e maravilhoso em margin: auto funcionando em todos os lados do elemento.

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

Ótimo para centralizar ícones ou pseudoelementos.

4. Fluffy Center

1. Apertar:ruim
2. Squash:ruim
3. Duplicado:ruim
4. Edição:ótimo!
5. Fluxo:ótimo! (desde que você use propriedades lógicas)

O participante "fluffy center" é de longe o mais saboroso, e é a única técnica de centralização que é totalmente de propriedade do elemento/filho. Veja nossa borda rosa interna única!

.fluffy-center {
  padding: 10ch;
}

Ótimo para centralização, tags, pílulas, botões, chips e muito mais com foco em palavras ou frases.

5. Pop & Plop

1. Apertar:ok
2. Squash:ok
3. Duplicado:ruim
4. Edição:boa
5. Fluxo:fine

Isso "aparece" porque o posicionamento absoluto retira o elemento do fluxo normal. A parte "plop" dos nomes vem de quando acho mais útil: colocar em cima de outras coisas. É uma técnica clássica e prática de centralização de sobreposição que é flexível e dinâmica para o tamanho do conteúdo. Às vezes, você só precisa colocar a interface na parte de cima de outra.

Ótimo para modais, toasts e mensagens, efeitos de pilha e profundidade, popovers.

O vencedor

Se eu estivesse em uma ilha e só pudesse ter uma técnica de centralização, seria…

[toque de tambor]

Gentle Flex 🎉

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

Você sempre pode encontrá-lo nas minhas folhas de estilo porque ele é útil para layouts macro e micro. É uma solução confiável e completa com resultados que atendem às minhas expectativas. Além disso, como sou viciado em dimensionamento intrínseco, costumo migrar para essa solução. É verdade que é muita coisa para digitar, mas os benefícios superam o código extra.

MVP

Fluffy Center (link em inglês)

.fluffy-center {
  padding: 2ch;
}

O Fluffy Center é tão micro que é fácil ignorar como uma técnica de centralização, mas é um elemento básico das minhas estratégias de centralização. É tão atômico que às vezes me esqueço de que estou usando.

Conclusão

Que tipos de coisas prejudicam suas estratégias de centralização? Que outros desafios podem ser adicionados ao jogo da resiliência? Considerei a tradução e uma troca de altura automática no contêiner… o que mais!?

Agora que você sabe como eu fiz isso, como você faria? Vamos diversificar nossas abordagens e aprender todas as maneiras de criar na Web. Siga o codelab com esta postagem para criar seu próprio exemplo de centralização, assim como os desta postagem. Envie um tweet com sua versão, e eu vou adicioná-la à seção Remixes da comunidade abaixo.

Remixes da comunidade

• CSS Tricks com uma postagem no blog