Como Centralizar uma DIV? 3 Maneiras Fáceis e Muito Rápidas

Assuntos do Post

Quer centralizar uma div? aprenda como com 3 métodos diferentes

Você provavelmente chegou até aqui pois está com a dúvida que pega todo o desenvolvedor web, seja ele junior ou até mesmo algum sênior. Bom o tutorial de hoje é muito rápido e pode salvar sua página, pois esse tutorial vai te ensinar a como centralizar uma div, seja horizontalmente, verticalmente ou até mesmo os dois.

Centralizar utilizando margin auto

Bom nosso tutorial começa com uma dica ótima, o margin: auto; é uma forma de definir as margens para que o conteudo da div fique automaticamente ao centro, isso irá centralizar sua <div> de forma fácil e rápida, você pode dar uma olhada em um exemplo abaixo:

.div1 {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Centralizar div via display flex

Bom nesse caso iremos precisar da propriedade display: flex; para construir um container flexivel e em seguida utilizar o justify-content: center; para que todo o conteúdo do container seja alinhado ao centro horizontalmente. Você ainda pode usar o align-itens: center; para alinhar a div verticalmente, veja um exemplo a seguir:

.div2 {
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center; //alinha horizontalmente
 align-itens: center;  //alinha verticalmente
}

Centralizar via position absolute

Você ainda pode usar o position: absolute; para alinhar ao centro tirando do fluxo, nesse caso o código é acompanhado das propriedades left:50%; e top:50%; que vai calcular o meio da página por porcentagem, porém essas propriedades vão calcular a partir do topo e da esquerda, sendo necessário complementar com a propriedade transform: translate(-50%, -50%);, Veja um exemplo de div a seguir:

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

Qual a diferença entre esses 3 métodos de centralização?

O margin: auto; Funciona bem na maioria dos casos, mas o elemento precisa ter uma largura especificada para que a centralização ocorra. Funciona bem para centralizar blocos de layout. Ou seja, é simples e eficaz para centralizar horizontalmente com largura definida.

Flexbox, ou display:flex;, oferece maior flexibilidade para organizar elementos em relação ao layout. Pode afetar a estrutura de outros elementos dentro do contêiner flex. Em outras palavras é mais versátil e pode ser usado para centralizar elementos em qualquer direção.

Já o position: absolute; pode afetar o fluxo normal do documento, especialmente se outros elementos tiverem posicionamento absoluto ou relativo. Dessa forma é útil para centralizar elementos em relação ao contêiner pai, mas pode ter implicações no fluxo do documento

Concluindo

A escolha entre essas abordagens dependerá das necessidades específicas do seu layout, projeto e do comportamento desejado. Flexbox é geralmente preferido por sua flexibilidade e facilidade de uso em muitos casos.

Fontes Desse artigo:

CSS Layout – Horizontal & Vertical Align (w3schools.com)

How to Center a Div with CSS (freecodecamp.org)