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

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

Muito longo; Para ler

Making security fun one episode at a time

3 técnicas CSS contemporâneas para centralizar itens

Muito longo; Para ler

Brian Treese

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

3 técnicas CSS contemporâneas para centralizar itens

Muito longo; Para ler

Brian Treese

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

HISTÓRIAS RELACIONADAS