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.

A centralização no CSS é um desafio notório, cheio de piadas e zombarias. 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 um raciocínio 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 de maior pontuação e a mais "valiosa". Esperamos que você aprenda novas técnicas e soluções de centralização.

A campainha da resiliência

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 fossem duráveis:

  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

Como editar e duplicar conteúdo com o VisBug
  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 centraliza e justifica crianças coletivamente, é uma técnica sólida para grupos de elementos que precisam ser lidos.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Prós
  • O conteúdo fica centralizado mesmo com espaço limitado e transbordando
  • As edições de centralização e a manutenção estão em um só lugar
  • O intervalo garante o mesmo espaçamento entre n crianças
  • A grade cria linhas por padrão
Contras
  • A filha mais larga (max-content) define a largura para todas as outras. Isso será discutido mais detalhadamente em Flexibilidade suave.

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

2. Flexível suave

  1. Squish:ótimo!
  2. Squash: ótimo!
  3. Duplicado:ótimo.
  4. Edit: ótimo!
  5. Flow:ó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;
}
Prós
  • Processa apenas o alinhamento, a direção e a distribuição
  • As edições e a manutenção ficam em um só lugar
  • A lacuna garante o mesmo espaçamento entre n filhos
Contras
  • A maioria das linhas de código

Ó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;
}
Prós
  • Truque divertido
  • Rápido e sujo
Contras
  • Resultados estranhos quando há estouro
  • A dependência da distribuição em vez do intervalo significa que os layouts podem ocorrer com filhos tocando nas laterais
  • Ser "empurrado" para a posição não parece ideal e pode resultar em uma mudança no tamanho da caixa da criança.

Ótimo para centralizar ícones ou pseudoelementos.

4. Centro fofo

  1. Apertar:ruim
  2. Squash:ruim
  3. Duplicação:ruim
  4. Edit: ótimo!
  5. Flow:ó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;
}
Prós
  • Protege o conteúdo
  • Atômico
  • Cada teste contém secretamente essa estratégia de centralização
  • O espaço entre as palavras é um espaço
Contras
  • Ilusão de não ser útil
  • Há um conflito entre o contêiner e os itens, naturalmente, já que cada um deles está sendo muito firme em relação ao tamanho.

Ideal para centralização centrada em palavras ou frases, tags, formatos em pílulas, botões, ícones e muito mais.

5. Pop e plop

  1. Squish: ok
  2. Squash:ok
  3. Duplicado:inválido
  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.

Prós
  • Útil
  • Confiável
  • Quando você precisa, é inestimável
Contras
  • Código com valores de porcentagem negativos
  • Requer position: relative para forçar um bloco de contenção
  • Quebras de linha antecipadas e estranhas
  • Pode haver apenas um por bloco contendo sem esforço adicional

Ó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 uma viciada em tamanhos intrínsecos, costumo me formar nessa solução. É verdade que há muito a ser digitado, mas os benefícios que ele oferece compensam 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 item básico das minhas estratégias. Ele é tão atômico que às vezes me esqueço de que estou usando.

Conclusão

O que quebra suas estratégias de centralização? Quais outros desafios poderiam ser adicionados ao toque de resistência? Pensei em tradução e um interruptor 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 um tweet para mim com sua versão, e eu a adicionarei à seção Remixes da comunidade abaixo.

Remixes da comunidade