5 Formas Diferentes de Centralizar uma Div

👋 Olá pessoal! Neste post, vamos explorar 5 maneiras diferentes de centralizar uma div em CSS. A centralização é uma técnica fundamental na criação de layouts para páginas da web. Então, vamos começar!

Centralização Horizontal

A centralização horizontal é útil quando queremos centralizar uma div horizontalmente na página. Para fazer isso, podemos utilizar o seguinte código CSS:

div {
  margin: 0 auto;
  width: 50%;
}


Este código centraliza a div horizontalmente definindo uma margem esquerda e direita automática e definindo a largura da div como 50% do contêiner pai.

Centralização Vertical

A centralização vertical é um pouco mais complicada, mas pode ser alcançada com o seguinte código CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.content {
  /* Estilos da div a ser centralizada */
}

Neste exemplo, criamos um contêiner pai com display flex, e definimos a propriedade justify-content como center e align-items como center. Em seguida, definimos a altura do contêiner como 100vh. Em seguida, definimos estilos para a div que desejamos centralizar.

Centralização Horizontal e Vertical

Para centralizar uma div tanto horizontalmente quanto verticalmente, podemos combinar as técnicas acima. O seguinte código CSS pode ser utilizado:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.content {
  margin: auto;
}

Neste exemplo, usamos a mesma técnica de centralização vertical que na técnica anterior, mas adicionamos uma margem automática para centralizar a div horizontalmente.

Centralização Absoluta

Outra maneira de centralizar uma div é usando posicionamento absoluto. O seguinte código CSS pode ser utilizado:

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Neste exemplo, definimos o contêiner pai com posicionamento relativo e definimos a div que desejamos centralizar com posicionamento absoluto. Em seguida, definimos o topo e a esquerda como 50% e usamos a propriedade transform para centralizar a div em relação ao seu próprio tamanho.

Centralização com Grid

Por último, podemos utilizar o grid para centralizar uma div. O seguinte código CSS pode ser utilizado:

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

.content {
  /* Estilos da div a ser centralizada */
}


Neste exemplo, criamos um contêiner pai com display grid e definimos a propriedade place-items como center. Em seguida, definimos a altura do contêiner como 100vh e estilos para a div que desejamos centralizar.

E é isso! Essas são 5 maneiras diferentes de centralizar uma div em CSS. Esperamos que este post tenha sido útil e que você possa usá-las em seus projetos futuros. Até a próxima! 👋

atualmente estou usando tailwindcss,

<div className="flex w-full justify-center items-center">
    <div>Centralizado</div>
</div>

mas dependendo da situação tbm faço com display absolute ou fixed

Será que usar o elemento

<center>

funciona nesse contexto? Eu uso bastante esse elemento.

bom de favoritar!!!❤️❤️❤️❤️

  1. Parabéns por sua dedicação de ajudar pessoas, geralmente iniciantes, e até mesmo aquelas avançadas que precisam relembrar de forma prática e rápida.
  2. Obrigado também pois me mostrou algumas formas nas quais não sabia e explicou melhor algumas que eu ja teria o conhecimento.
muito obrigado, estudo para ser melhor a cada dia e entrar no mercado de trabalho e sei oque é pesquisar muito para entender uma coisa simples, então tentei passar um pouco que sei so que do meu jeito.

o cara fez o impossível. obrigado amigo

Esse tema é muito legal, pq existem várias formas e cada uma se ajusta a uma situação diferente.

Depois de algum tempo de experiência a gente começa a descobrir algumas estratégias para centralizar as coisas.

Escrevi isso no meu blog há um tempo atrás, se alguém quiser ler como um estudo adicionar: https://demenezes.dev/posts/centralizar-em-css/

simples, mas sensacional!

Vai me ajudar com o meu projeto para estudo, hehehe

uma vez me ajudaram e agora tento retribuir