3 técnicas CSS contemporâneas para centralizar itens

Centralizar itens com HTML e CSS costumava ser muito difícil de fazer. Bem, não é mais. Existem muitas maneiras diferentes de fazer isso agora. E isso é bom porque podemos precisar de opções diferentes em cenários diferentes. Neste vídeo, veremos três das minhas maneiras favoritas de centralizar itens. Usaremos posicionamento, depois usaremos flexbox e, por último, usaremos minha grade CSS preferida.

Tudo bem, vamos lá.

É realmente uma coisa tão estranha que durante tanto tempo tenha sido tão difícil simplesmente colocar itens no centro de um contêiner na Web. Bem, a centralização horizontal era fácil, mas a centralização vertical era quase impossível até anos mais recentes.

Usando posicionamento CSS para centralizar itens

Este primeiro método, usando posicionamento CSS, provavelmente já existe há mais tempo, mas evoluiu um pouco à medida que novas propriedades surgiram. Vejamos um exemplo.

Aqui temos esta caixa que queremos centralizar neste outro container com borda vermelha. É um elemento forte e é colocado diretamente dentro de um elemento div que é esta caixa vermelha que estamos vendo aqui.

Usaremos posicionamento absoluto para este método, então vamos adicioná-lo ao nosso elemento strong .

 strong { position: absolute; }

Agora, para que isso funcione corretamente, nossa div precisará criar um contexto de posicionamento para o nosso item ser posicionado. Existem muitas maneiras diferentes de fazer isso, mas a melhor opção para este exemplo é usar o posicionamento relativo.

 div { position: relative; }

Agora podemos posicionar nosso elemento cinquenta por cento abaixo da altura do nosso div e acima de cinquenta por cento da largura. Para posicionar de cima para baixo, podemos usar a nova propriedade lógica, inset-block-start com um valor de cinquenta por cento. E, para posicionar a partir da esquerda, podemos usar inset-inline-start com o mesmo valor de cinquenta por cento.

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

Ok, então não está exatamente centralizado, não é?

Bem, isso ocorre porque posicionamos o item no centro do nosso div , mas sua posição é baseada no canto superior esquerdo. O que precisamos fazer agora é deslocar o item cinquenta por cento de sua altura e cinquenta por cento de sua largura. Isso o colocará corretamente no centro. Mas, como podemos fazer isso?

Na verdade, é muito fácil. Podemos usar a nova propriedade translate do CSS. O primeiro valor será transladado ao longo do eixo x. Precisamos voltar cinquenta por cento, então adicionaremos um valor de menos cinquenta por cento. E, o segundo valor se traduz ao longo do eixo y, daremos a ele o mesmo valor de menos cinquenta por cento.

 strong { ... translate: -50% -50%; } 

E lá vamos nós. Perfeitamente centrado.

Aqui está o exemplo final de trabalho usando posicionamento e tradução:

Então, essa é uma maneira de fazer isso, mas não é a minha favorita.

Usando Flexbox para centralizar itens

Se puder, prefiro usar o Flexbox em vez do posicionamento porque é ainda mais fácil, requer menos linhas de código, nenhum contexto de posicionamento e, honestamente, parece uma solução melhor e mais moderna. Vejamos um exemplo.

Ok, então estamos começando do mesmo ponto, temos nosso div externo com a borda vermelha e depois nosso elemento forte interno.

Começamos tornando nosso div um contêiner flexível com display, flex. Então podemos alinhar nosso item ao centro ao longo do eixo x com a propriedade justify-content e um valor de centro. E por último, mas não menos importante, podemos alinhar ao longo do eixo y com a propriedade align-items e o mesmo valor de center.

 div { display: flex; justify-content: center; align-items: center; } 

E aí está, o item está devidamente centralizado e foram necessárias apenas três linhas de código para chegar lá desta vez.

Aqui está o exemplo final de trabalho usando Flexbox:

Então, isso é legal e às vezes tenho necessidade de fazer isso, mas minha maneira favorita de posicionar itens no centro é usar a grade CSS. E, novamente, minhas razões para isso são porque é ainda mais fácil que flex e requer ainda menos código.

Usando grade para centralizar itens

Ok, mesmo ponto de partida com a caixa vermelha e o item interno.

Desta vez, faremos de nosso div um contêiner de grade com um valor de display grid . Agora, o que é legal aqui é que podemos usar as mesmas duas propriedades que usamos em nosso exemplo de flexbox, se quisermos. Podemos adicionar justify-content: center e align-items: center . Funciona exatamente da mesma maneira.

 div { display: grid; justify-content: center; align-items: center; }

É engraçado, mas é assim que o grid funciona, ele pode usar as mesmas propriedades de alinhamento de caixa que o flexbox faz. Mas, se deixássemos assim, realmente não haveria vantagem em usar a grade, certo?

Bem, o que podemos fazer é remover essas propriedades de alinhamento e substituí-las pela propriedade place-items. E podemos atribuir a esta propriedade um valor central.

 div { display: grid; place-items: center; } 

Pronto, agora reduzimos tudo para apenas duas linhas de CSS.

Aqui está o exemplo final de trabalho usando CSS Grid:

Conclusão

Então, como eu disse antes, é muito mais fácil do que costumava ser, com certeza. Mas todas essas técnicas ainda são muito relevantes e podem ser necessárias devido a uma série de circunstâncias, por isso é bom conhecê-las para garantir. Eu definitivamente preferiria a menor quantidade de grade CSS de código e, se isso não funcionar, a próxima melhor opção é o flexbox, e se nenhum deles funcionar, tente o posicionamento.