Siga cinco técnicas de centralização durante uma série de testes para saber qual é a mais resiliente a mudanças.
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:
- Comprimido:a centralização precisa processar mudanças na largura.
- Comprimido:a centralização precisa ser capaz de processar mudanças na altura.
- Duplicado: a centralização precisa ser dinâmica para o número de itens
- Edição:a centralização precisa ser dinâmica de acordo com a extensão e o idioma do conteúdo.
- 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
- Squish: ótimo!
- Squash: ótimo!
- Duplicado: ótimo!
- Edição: ótimo!
- 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;
}
- 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
- 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.
2. Flexível suave
- Squish: ótimo!
- Squash:ótimo!
- Duplicado: ótimo!
- Edição: ótimo!
- 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;
}
- 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
- A maioria das linhas de código
Ótimo para layouts macro e micro.
3. Autobots
- Squish: ótimo
- Squash:ótimo
- Duplicação:multa
- Edição: ótima
- 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;
}
- Truque divertido
- Rápida e suja
- 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
- Squish: ruim
- Squash:ruim
- Duplicado: inválido
- Edição: ótimo!
- 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;
}
- Proteger o conteúdo
- Atômico
- Todo teste contém secretamente essa estratégia de centralização
- O espaço de palavras é uma lacuna
- 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
- Squish:tudo bem
- Squash:tudo bem
- Duplicado: inválido
- Editar: bom
- 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.
- Útil
- Confiável
- Ele tem um valor inestimável quando você precisa
- 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