3 maneiras fáceis de centralizar um elemento com CSS

últimas postagens

Principais conclusões

Centralizar elementos em layouts web sempre foi um desafio, mas o CSS moderno agora suporta posicionamento central fácil.
Flexbox é o método mais utilizado para centralizar elementos, fornecendo um modelo de layout flexível que permite fácil alinhamento.
CSS Grid e posicionamento CSS também são métodos eficazes para centralizar elementos em uma página da web, oferecendo controle preciso sobre layout e alinhamento.

Centralizar um elemento em seu layout web é um desafio que sempre frustrou os designers. Nem sempre foi fácil de fazer, mas muitos projetos exigem posicionamento central. Felizmente, o CSS moderno agora tem um bom suporte para centralização.

Aprenda como centralizar um div horizontalmente e verticalmente usando Flexbox, CSS Grid e posicionamento CSS.

Um arquivo HTML simples para praticar a centralização

Todos os exemplos a seguir usam um documento HTML mínimo para demonstrar a centralização com CSS. Use esta marcação e varie o CSS de acordo com cada seção para ver como essas propriedades se comportam.

 <!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 100px; height: 100px; }
 body { height: calc(100vh - 16px); }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

Usando Flexbox para centralizar um elemento Div

Você precisará entender os fundamentos do Flexbox antes de usá-lo para centralizar um elemento div. Felizmente, o Flexbox segue uma abordagem simples, por isso é o mais utilizado. Ele fornece um modelo de layout flexível que facilita o alinhamento e a distribuição de espaço entre os itens de um contêiner, tornando-o ideal para centralizar elementos.

Como redefinir as configurações de fábrica do meu laptop Nextbook

Use o seguinte CSS para obter centralização com Flexbox.

Envolva seu elemento div em um contêiner. Aplique a propriedade display: flex ao contêiner para ativar o layout Flexbox. Em um caso de teste simples, o corpo pode servir como contêiner:

 body {
  display: flex;
}

Use as propriedades justificar-conteúdo e alinhar itens para alinhar itens ao longo do eixo principal (horizontal) e do eixo cruzado (vertical), respectivamente. Para centralizar ambos os eixos, defina estas propriedades como centralizadas. Para uma demonstração simples, você também deve definir a altura do corpo para 100vh, para poder ver o efeito do alinhamento vertical.

 body {
  justify-content: center;
  align-items: center;
}

Dê ao div uma cor de fundo para visualizar seu posicionamento na página final:

 div { background-color: red; }

Visualizando o resultado no DevTools do Google Chrome, você pode ver como as duas propriedades controlam o alinhamento ao longo de cada eixo:

A tela não liga durante as chamadas devido a um sensor de proximidade quebrado? Aqui estão as correções

Usando grade CSS para centralizar um elemento Div

Usar CSS Grid para centralizar um elemento é outro método eficaz, oferecendo controle preciso sobre layout e alinhamento.

Defina um contêiner para seu layout e aplique o estilo display: grid para ativar CSS Grid. Neste caso, o corpo serve de recipiente.

 body {
  display: grid;
}

Use as propriedades grid-template-columns e grid-template-rows para definir a estrutura da sua grade. Para centralizar, uma única coluna e linha serão suficientes, então use 1fr para ambas.

 body {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

Use a propriedade place-items para centralizar o conteúdo da grade, tanto horizontal quanto verticalmente.

 body {
  place-items: center;
}

Estilize o plano de fundo do seu elemento div para visualizá-lo no centro do contêiner da grade.

 div {
  background-color: blue;
}

Nesse caso, uma única propriedade controla o posicionamento central da div na sua página:

Usando posicionamento CSS para centralizar um elemento Div

Para usar a propriedade CSS position para centralizar um div, você também precisa entender como funcionam as transformações CSS com transições. Aqui está um guia passo a passo com um exemplo.

É a melhor plataforma de aprendizagem online

Para posicionar o elemento div, certifique-se de que seu contêiner tenha uma posição relativa. Isso estabelece um contexto de posicionamento relativo, para que você possa colocar o div no centro do seu contêiner.

 body {
  position: relative;
}

Aplique posicionamento absoluto ao elemento div e use as propriedades top e left para posicionar o canto superior esquerdo do div exatamente no centro de seu contêiner.

 div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 background-color: green;
}

A transformação translate(-50%, -50%) move o div para a esquerda e para cima pela metade de sua largura e metade de sua altura.

Este método funciona primeiro centralizando o canto superior do elemento e, em seguida, movendo-o relativamente pela metade de sua largura e metade de sua altura.

Flexbox, CSS Grid e posicionamento CSS são ferramentas poderosas que você pode usar para centralizar elementos em uma página da web. Com o Flexbox, você pode centralizar horizontal e verticalmente com apenas algumas linhas de código. CSS Grid fornece alinhamento poderoso em duas dimensões, e você pode usar o posicionamento CSS para centralizar um elemento em relação ao seu contêiner pai.

Com essas técnicas, você pode garantir que suas páginas da web tenham uma aparência limpa e profissional.