Centralização no CSS

Siga cinco técnicas de centralização que passam por uma série de testes para ver qual delas é mais resistente a mudanças.

Adam Argyle

A centralização no CSS é um desafio notório, cheio de piadas e zombarias. 2020 O CSS cresceu, e agora podemos dar risada dessas piadas de verdade, não por meio de cerrar os dentes.

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

O desafio

Há diferentes tipos de centralização. De diferentes casos de uso, muitos fatores para centralizar etc. A fim de demonstrar uma lógica por trás de "um vencedor" técnica de centralização, eu criou o The Resilience Ringer. Eles são uma série de testes de estresse para cada objetivo estratégia para equilibrar dentro e você observar seu desempenho. No final, revelo a técnica de maior pontuação e a mais "valiosa". Esperamos que você saia com novas técnicas e soluções de centralização.

A campainha da resiliência

A campainha Resilience é uma representação das minhas crenças de que deve ser resiliente a layouts internacionais, janelas de visualização de tamanho variável, edições de texto e anúncios dinâmicos conteúdo. Esses princípios ajudaram a moldar os seguintes testes de resiliência para técnicas de centralização para durar:

  1. Comprimido: a centralização deve ser capaz de lidar com mudanças na largura
  2. Comprimido: a centralização deve ser capaz de lidar com mudanças na altura
  3. Duplicação: a centralização deve ser dinâmica para o número de itens
  4. Editar: a centralização deve ser dinâmica para comprimento e idioma do conteúdo
  5. Fluxo: a centralização deve ser independente da direção do documento e do modo de gravação

A solução vencedora deve demonstrar resiliência mantendo o conteúdo ao centro enquanto são comprimidos, comprimidos, duplicados, editados e alterados para vários modos de idioma e direções. Centro confiável e resiliente, um centro seguro.

Legenda

Forneci algumas dicas de cores visuais para ajudar você a manter algumas informações meta 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 itens
  • Cada criança tem um fundo branco para que você possa ver os efeitos que central tem em tamanhos de caixas secundários (se houver)

Os cinco participantes

Cinco técnicas de centralização entram no Ringer da Resiliência, apenas uma recebe Coroa de resiliência 👸.

1. Centro de conteúdo

Editar e duplicar conteúdo com 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 da Abreviação de place-content. Como centra e justifica as crianças coletivamente, essa é uma técnica sólida de centralização para grupos de elementos que precisam ser lidos.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Prós
  • O conteúdo é centralizado mesmo sob excesso de espaço
  • Como centralizar edições e manutenção em um só lugar
  • A lacuna garante o mesmo espaçamento entre n filhos
  • A grade cria linhas por padrão
Contras
  • O filho mais largo (max-content) define a largura para o restante. Isso será discutidos mais em Gentle Flex.

Ideal 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. Duplicar: ótimo!
  4. Editar: ótimo!
  5. Flow:ótimo!

A Gentle Flex é uma estratégia mais realista somente. É suave e gentil, porque ao contrário de place-content: center, nenhum tamanho de caixa filho é alterado durante o centralizando. O mais suavemente possível, todos os itens devem ser 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 mesmo espaçamento entre n filhos
Contras
  • A maioria das linhas de código

Ótimo para layouts macro e micro.

3. Autobots

  1. Squish: ótimo
  2. Squash: ótimo
  3. Duplicar: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 margin: auto funcionando em todos os lados do elemento.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Prós
  • Truque divertido
  • Rápida e suja
Contras
  • Resultados estranhos ao ultrapassar o limite
  • A dependência da distribuição em vez da lacuna significa que os layouts podem ocorrer com filhos. toques nas laterais
  • Ser "empurrado" não parece ideal e pode resultar em mudanças com o 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. Editar: ótimo!
  5. Flow:ótimo! (contanto que você use propriedades lógicas)

Concorrente "centro fofo" é, de longe, nosso concorrente com o melhor som e o único técnica de centralização que é de propriedade do elemento/secundário. Conheça nosso lado rosa borda!?

.fluffy-center {
  padding: 10ch;
}
Prós
  • Protege o conteúdo
  • Atômico
  • Cada teste contém secretamente essa estratégia de centralização
  • Espaço entre palavras é lacuna
Contras
  • Ilusão de não ser útil
  • Há um conflito entre o recipiente e os itens, naturalmente, já que cada um deles ser firme sobre o dimensionamento

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

5. Pop e Plop

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

Isso se destaca porque o posicionamento absoluto faz com que o elemento saia do normal fluxo O "plop" parte dos nomes vem de quando acho mais útil: colocando-o em cima de outras coisas. É uma central de sobreposições clássica e útil, técnica que seja flexível e dinâmica em relação ao tamanho do conteúdo. Às vezes, você só precisa para colocar a interface sobre outra.

Prós
  • Útil
  • Confiável
  • Sempre que você precisa, é inestimável
Contras
  • 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 contendo sem esforço adicional

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

Vencedor

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

[tocar dos tambores]

Flexível Flex 🎉

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

Você sempre pode encontrá-lo em minhas folhas de estilo porque é útil para macros e micro layouts. É uma solução confiável e versátil, com resultados que correspondem as expectativas da equipe. Além disso, como sou uma viciada em tamanhos intrínsecos, tendem a me formar nessa solução. Verdadeiro, é muito para digitar, mas os benefícios que ele oferece supera o código extra.

MVP

Fluffy Center (link em inglês)

.fluffy-center {
  padding: 2ch;
}

O Fluffy Center é tão micro que é fácil deixar de lado uma técnica de centralização, mas é essencial para minhas estratégias de centralização. É tão atômico que às vezes eu esqueça que estou usando.

Conclusão

Que tipo de coisa atrapalha suas estratégias de centralização? Que outros desafios poderia ser adicionado à campainha de resiliência? pensei em tradução e botão de altura automática no contêiner... o que mais?

Agora que você sabe como eu fiz isso, como 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 exemplos desta postagem. Tweet me sua versão, e vou adicioná-la ao Remixes da comunidade abaixo.

Remixes da comunidade