Centralização no CSS

Siga cinco técnicas de centralização em uma série de testes para descobrir qual é a mais resiliente a mudanças.

Adam Argyle

A centralização em CSS é um desafio conhecido, cheio de piadas e deboches. Em 2020, o CSS cresceu e agora podemos rir dessas piadas de verdade, não com os dentes cerrados.

Se você prefere vídeos, confira a versão deste post no YouTube:

O desafio

Há diferentes tipos de centralização. De diferentes casos de uso, número de coisas para 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 para equilibrar e observar o desempenho delas. No final, vou revelar a técnica com a maior pontuação, além da "mais valiosa". Esperamos que você saia daqui com novas técnicas e soluções de centralização.

O mestre 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 tamanhos variáveis, 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 resistam:

1. Espremido: a centralização precisa ser capaz de lidar com mudanças na largura
2. Squashed: a centralização precisa ser capaz de lidar com mudanças na altura
3. Duplicado: a centralização precisa ser dinâmica para o número de itens
4. Editar: a centralização precisa ser dinâmica de acordo com o tamanho 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 ao manter 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 e resiliente, um centro seguro.

Legend

Fornecemos 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 ter itens centralizados.
• Cada filho tem uma cor 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 ringue da resiliência, mas apenas uma vai receber a coroa da resiliência 👸.

1. Central de conteúdo

Editar e duplicar conteúdo com o VisBug

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

Vai ser difícil superar a concisão de display: grid e a abreviação de 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 é centralizado mesmo em espaços limitados e com overflow
• As edições e a manutenção ficam centralizadas em um só lugar.
• O espaçamento garante que os n filhos fiquem igualmente espaçados.
• A grade cria linhas por padrão

Contras

• O filho mais largo (max-content) define a largura de todos os outros. Isso será discutido em mais detalhes em Gentle Flex.

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

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

2. Gentle Flex

1. Squish: ótimo!
2. Squash: ótimo!
3. Duplicar: ótimo!
4. Editar: ótimo!
5. Flow: ótimo!

O Gentle Flex é uma estratégia apenas de centralização mais verdadeira. Ela é suave e delicada, porque, ao contrário de place-content: center, nenhum tamanho de caixa de filhos é alterado durante a centralização. Com o máximo de cuidado possível, 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 espaçamento garante que os n filhos fiquem igualmente espaçados.

Contras

• A maioria das linhas de código

Ótimo para layouts macro e micro.

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

3. Autobot

1. Apertar: ótimo
2. Squash: ótimo
3. Duplicada: 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 trabalhar em todos os lados do elemento.

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

Prós

• Truque divertido
• Rápido e simples

Contras

• Resultados estranhos ao transbordar
• A dependência da distribuição em vez do espaçamento 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 do filho.

Ótimo para centralizar ícones ou pseudoelementos.

4. Centro fofo

1. Apertar: ruim
2. Squash: ruim
3. Duplicada: ruim
4. Editar: ótimo!
5. Flow: ótimo! (desde que você use propriedades lógicas)

O concorrente "centro fofo" é de longe o mais saboroso e é a única técnica de centralização que é totalmente de propriedade do elemento/filho. Viu a borda rosa interna?

.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 palavras é uma lacuna

Contras

• Ilusão de não ser útil
• Há um conflito entre o contêiner e os itens, já que cada um é muito firme em relação ao tamanho.

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

5. Pop e Plop

1. Squish: ok
2. Abóbora: ok
3. Duplicada: ruim
4. Editar: multa
5. Fluxo: bom

Isso acontece 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 uma IU sobre outra.

Prós

• Útil
• Confiável
• Quando você precisa, ele é inestimável

Contras

• Código com valores percentuais negativos
• Requer position: relative para forçar um bloco de contenção
• Quebras de linha antecipadas e estranhas
• Só pode haver 1 por bloco de contêiner sem esforço adicional

Ótimo para modais, toasts 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…

[rufam os tambores]

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 de macro e micro. É uma solução confiável em todos os aspectos, com resultados que atendem às minhas expectativas. Além disso, como sou viciado em dimensionamento intrínseco, costumo usar essa solução. É verdade que é muita coisa para digitar, mas os benefícios que ele oferece compensam o código extra.

MVP

Centro fofo

.fluffy-center {
  padding: 2ch;
}

O Fluffy Center é tão micro que é fácil ignorá-lo 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 esqueço que estou usando.

Conclusão

O que pode atrapalhar suas estratégias de centralização? Que outros desafios poderiam ser adicionados ao teste de resiliência? Considerei a 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 formas de criar na Web. Siga o codelab com esta postagem para criar seu próprio exemplo de centralização, assim como os mostrados aqui. Envie sua versão para mim no Twitter (link em inglês) e eu vou adicioná-la à seção Remixes da comunidade abaixo.

Remixes da comunidade

• CSS Tricks com uma postagem do blog