Centralizar itens com   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. HTML e CSS  Tudo bem, vamos lá.   https://youtu.be/XMH4c1xIZtE?embedable=true  É 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   que é esta caixa vermelha que estamos vendo aqui.  div  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   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   div { position: relative; }  Agora podemos posicionar nosso elemento cinquenta por cento abaixo da altura do nosso   e acima de cinquenta por cento da largura. Para posicionar de cima para baixo, podemos usar a nova propriedade lógica,   com um valor de cinquenta por cento. E, para posicionar a partir da esquerda, podemos usar   com o mesmo valor de cinquenta por cento. div inset-block-start inset-inline-start     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   , 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? div  Na verdade, é muito fácil. Podemos usar a nova propriedade   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. translate     strong { ... translate: -50% -50%; }  E lá vamos nós. Perfeitamente centrado.  Aqui está o exemplo final de trabalho usando posicionamento e tradução:   https://codepen.io/brianmtreese/pen/PoLYmKW?embedable=true  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   e um valor de centro. E por último, mas não menos importante, podemos alinhar ao longo do eixo y com a propriedade   e o mesmo valor de center. justify-content align-items     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:   https://codepen.io/brianmtreese/pen/bGZbWgW?embedable=true  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   e requer ainda menos código. flex  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     . Agora, o que é legal aqui é que podemos usar as mesmas duas propriedades que usamos em nosso exemplo de flexbox, se quisermos. Podemos adicionar   e   . Funciona exatamente da mesma maneira. display grid justify-content: center align-items: center   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:   https://codepen.io/brianmtreese/pen/zYbOwoM?embedable=true  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.  Também publicado   . aqui

Buy Me a Coffee

Este áudio é produzido no idioma original da história!

3 técnicas CSS contemporâneas para centralizar itens

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Toque para ganhar: Telegram pode integrar os próximos 10 bilhões de usuários criptográficos antes de Solana

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Toque para ganhar: Telegram pode integrar os próximos 10 bilhões de usuários criptográficos antes de Solana

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps