Centralização no CSS

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

Adam Argyle

Centralizar em CSS é um desafio conhecido, cheio de piadas e zombaria. O CSS de 2020 está mais maduro, e agora podemos rir dessas piadas sem ficar com os dentes cerrados.

Se preferir vídeos, confira a versão desta postagem no YouTube:

O desafio

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

O toque de resiliência

O Resilience Ringer é uma representação da minha crença 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 fossem duradouras:

1. Apertado:o alinhamento central precisa ser capaz de processar mudanças na largura.
2. Esmagado:o alinhamento central precisa ser capaz de processar mudanças na altura.
3. Duplicado:a centralização precisa ser dinâmica em relação ao número de itens.
4. Edit: o alinhamento precisa ser dinâmico de acordo com o comprimento e o idioma do conteúdo
5. Fluxo:a centralização precisa ser independente da direção do documento e do modo de escrita.

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

Legenda

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

• Uma borda rosa indica a propriedade de estilos de centralização
• A caixa cinza é o plano de fundo do contêiner, que busca centralizar os itens.
• Cada filho tem uma cor de plano de fundo branca para que você possa conferir os efeitos da técnica de centralização nos tamanhos de caixa filhos (se houver).

Os 5 concorrentes

Cinco técnicas de centralização entram na Liga da Resiliência, e apenas uma vai receber a coroa 👸.

1. Central de conteúdo

1. Squish: ótimo!
2. Squash: ótimo!
3. Duplicação: ótimo!
4. Editar: ótimo!
5. Fluxo: ótimo!

Vai ser difícil superar a concisão de display: grid e a abreviação place-content. Como ele centraliza e justifica os filhos coletivamente, é uma técnica de centralização sólida para grupos de elementos que precisam ser lidos.

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

Ótimo para layouts macro que contêm parágrafos e títulos, protótipos ou geralmente coisas que precisam de centralização legível.

2. Flexibilidade suave

1. Squish:ótimo!
2. Squash: ótimo!
3. Duplicado:ótimo.
4. Edit: ótimo!
5. Fluxo:ótimo!

O Gentle Flex é uma estratégia de centralização mais verdadeira. Ele é suave e suave, porque diferente de place-content: center, nenhum tamanho de caixa de crianças é alterado durante a centralização. Com cuidado, todos os itens são empilhados, centralizados e espaçados.

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

Ótimo para layouts macro e micro.

3. Autobot

1. Squish:ótimo
2. Squash:ótimo
3. Duplicação:multa
4. Edit: ó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. Duplicação:ruim
4. Edit: ótimo!
5. Fluxo:ótimo! (desde que você use propriedades lógicas)

O participante "fluffy center" é, de longe, o concorrente com o som mais agradável e é a única técnica de centralização que é totalmente de propriedade do elemento/filho. Você viu nossa borda rosa interna individual?

.fluffy-center {
  padding: 10ch;
}

Ótimo para centralização de palavras ou frases, tags, pílulas, botões, ícones e mais.

5. Pop & Plop

1. Squish:ok
2. Squash:ok
3. Duplicação:ruim
4. Edit: fine
5. Fluxo:bom

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

Ótimo para modais, notificações e mensagens, pilhas e efeitos de profundidade, popovers.

O vencedor

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

[batida de tambor]

Flexibilidade suave 🎉

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

Ele sempre está nas minhas folhas de estilo porque é útil para layouts macro e micro. É uma solução confiável com resultados que correspondem às minhas expectativas. Além disso, como sou viciado em dimensionamento, costumo usar essa solução. É verdade que é muito para digitar, mas os benefícios que ele oferece são maiores do que o código extra.

MVP

Fluffy Center (link em inglês)

.fluffy-center {
  padding: 2ch;
}

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

Conclusão

Quais tipos de coisas quebram suas estratégias de centralização? Quais outros desafios poderiam ser adicionados ao toque de resistência? Pensei em tradução e uma mudança de altura automática no contêiner… o que mais?

Agora que você sabe como eu fiz, 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 sua versão para mim por tweet e vou adicioná-la à seção Remixes da comunidade abaixo.

Remixes da comunidade

• Truques de CSS com uma postagem de blog