Centralização no CSS

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

Adam Argyle

Centralizar no CSS é um desafio notório, repleto de piadas e zombaria. 2020 CSS já cresceu e agora podemos rir dessas piadas com honestidade, não entre os dentes cerrados.

Se preferir vídeo, aqui está uma versão do YouTube desta postagem:

O desafio

Existem diferentes tipos de centralização. De diferentes casos de uso, número de coisas para o centro etc. Para demonstrar uma justificativa por trás de uma técnica de centralização "vencedora", criei o The Resilience Ringer. Há uma série de testes de estresse para cada estratégia de centralização a ser equilibrada e você pode observar o desempenho delas. No final, eu revelo a técnica de maior pontuação e também uma "mais valiosa". Esperamos que você saia com novas técnicas e soluções de centralização.

Campainha da 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 testes de resiliência abaixo para as técnicas de centralização a serem mantidas:

1. Comprimido:a centralização precisa processar mudanças na largura.
2. Comprimido:a centralização precisa ser capaz de processar mudanças na altura.
3. Duplicado: a centralização precisa ser dinâmica para o número de itens
4. Edição:a centralização precisa ser dinâmica de acordo com a extensão e o idioma do conteúdo.
5. Fluxo:a centralização precisa ser independente da direção do documento e do modo de gravação

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

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 centralizados
• A caixa cinza é o plano de fundo do contêiner que busca centralizar os itens.
• Cada filho tem uma cor de fundo branca para que você possa ver os efeitos da técnica de centralização nos tamanhos das caixas filhas (se houver).

Os 5 Concorrentes

Cinco técnicas de centralização entram na campainha de resiliência, apenas uma vai receber a coroa de resiliência 👸.

1. Central de conteúdo

Editar e duplicar conteúdo com o VisBug

1. Squish: ótimo!
2. Squash: ótimo!
3. Duplicado: ótimo!
4. Edição: ótimo!
5. Flow: ótimo!

Vai ser difícil superar a concisão de display: grid e a abreviação de place-content. Como ela centraliza e justifica 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 com espaço limitado e excedente
• Centralize as edições e a manutenção em um só lugar
• A lacuna garante o espaçamento igual entre n filhos
• A grade cria linhas por padrão

Desvantagens

• O filho mais largo (max-content) define a largura do restante. Isso será discutido mais no Gentle Flex.

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

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

2. Flexível suave

1. Squish: ótimo!
2. Squash:ótimo!
3. Duplicado: ótimo!
4. Edição: ótimo!
5. Flow:ótimo!

O Gentle Flex é uma estratégiaexclusiva de centralização verdadeira. Ela é suave e suave, porque, ao contrário do place-content: center, nenhum tamanho de caixa infantil é modificado durante a centralização. O mais gentilmente 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.
• Edições e manutenção em um só lugar
• A lacuna garante o espaçamento igual entre n filhos

Desvantagens

• A maioria das linhas de código

Ótimo para layouts macro e micro.

Termo importante : layouts macro são como estados ou territórios de um país: zonas de cobertura ampla e de nível muito alto. As zonas criadas por layouts de macro tendem a conter mais layouts. Quanto menos superfície o layout cubra, menos ele se torna 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. Autobots

1. Squish: ótimo
2. Squash:ótimo
3. Duplicação:multa
4. Edição: ótima
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 no margin: auto funcionar em todos os lados do elemento.

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

Prós

• Truque divertido
• Rápida e suja

Desvantagens

• Resultados estranhos ao estourar
• A dependência da distribuição em vez de lacuna significa que os layouts podem ocorrer com crianças tocando nos lados
• "Empurrar" 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. Squish: ruim
2. Squash:ruim
3. Duplicado: inválido
4. Edição: ótimo!
5. Flow:ótimo! (contanto que você use propriedades lógicas)

O "centro macio" do concorrente é de longe o nosso competidor mais saboroso e é a única técnica de enfoque que pode ser realizada inteiramente por elementos ou crianças. Viu essa borda rosa interna sozinha?!

.fluffy-center {
  padding: 10ch;
}

Prós

• Proteger o conteúdo
• Atômico
• Todo teste contém secretamente essa estratégia de centralização
• O espaço de palavras é uma lacuna

Desvantagens

• Ilusão de não ser útil
• Há um conflito entre o contêiner e os itens, naturalmente, porque cada um está sendo muito firme quanto ao tamanho

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

5. Pop e plop

1. Squish:tudo bem
2. Squash:tudo bem
3. Duplicado: inválido
4. Editar: bom
5. Fluxo: bom

Esse "aparece" porque o posicionamento absoluto remove o elemento do fluxo normal. A parte "plop" do nome vem quando acho mais útil: colocá-la sobre outras coisas. Essa é uma técnica de centralização de sobreposição clássica e prática, que é flexível e dinâmica em relação ao tamanho do conteúdo. Às vezes, você só precisa colocar a IU em cima de outra.

Prós

• Útil
• Confiável
• Ele tem um valor inestimável quando você precisa

Desvantagens

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

Ideal para modais, avisos e mensagens, pilhas, efeitos de profundidade e pop-ups.

O vencedor

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

[rolagem de tambor]

Flexível suave 🎉

.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 é útil para layouts macro e micro. É uma solução confiável e abrangente com resultados que correspondem às minhas expectativas. Além disso, como sou viciada em tamanho intrínseco, tendem a me formar para essa solução. Verdadeiro, é muito para digitar, mas os benefícios que ele oferece 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ômica que, às vezes, esqueço que a estou usando.

Conclusão

Que tipos de coisas quebram suas estratégias de centralização? Que outros desafios podem ser adicionados à campainha de resiliência? Pensei na movimentação e em um botão de altura automática no contêiner... o que mais?

Agora que você sabe como eu fiz isso, como você iria?! 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, como os desta postagem. Envie um tweet para mim com sua versão e eu vou adicioná-la à seção Remixes da comunidade abaixo.

Remixes da comunidade

• Dicas para o CSS com uma postagem do blog