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. Duplicação: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 dos 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 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;
}

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 coisas que precisam de centralização legível.

Observação : place-content não é exclusivo para display: grid. O display: flex também pode se beneficiar das abreviações place-content e place-item.

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;
}

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
• O intervalo garante o mesmo espaçamento entre n crianças

Contras

• A maioria das linhas de código

Ótimo para layouts macro e micro.

Termo-chave: layouts macro são como estados ou territórios de um país: zonas de cobertura grandes e de nível muito alto. As zonas criadas por layouts macro tendem a conter mais layouts. Quanto menos superfície o layout cobrir, menos macro ele será. Como um layout cobre menos área ou contém menos layouts, ele se torna um microlayout.

3. Autobot

1. Squish:ótimo
2. Squash:ótimo
3. Duplicação:ok
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. 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;
}

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.

Ó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.

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
• Só pode haver um por bloco de contenção sem esforço extra

Ó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 eu vou adicionar ela à seção Remixes da comunidade abaixo.

Remixes da comunidade

• Truques de CSS com uma postagem de blog