Gerador de centralizar div no CSS
O Gerador de Centralizar Div ajuda você a obter as regras exatas de CSS para alinhar qualquer elemento na tela. Escolha o método — Flexbox, Grid ou Posicionamento Absoluto — e defina se o alinhamento deve ser horizontal, vertical ou em ambos os eixos. O código é gerado na hora e fica pronto para ser copiado diretamente para o seu projeto.
Como centralizar uma div no CSS passo a passo
Centralizar elementos no CSS depende de aplicar as propriedades corretas no container pai e, em alguns casos, no elemento filho. Siga o passo a passo para gerar o código adequado:
- Escolha o eixo: selecione se deseja centralizar apenas na horizontal, apenas na vertical ou em ambos os eixos simultaneamente.
- Selecione o método: opte por Flexbox para a maioria dos layouts, CSS Grid para declarar o alinhamento em poucas linhas ou Posicionamento Absoluto quando o container pai não puder ter seu modo de exibição alterado.
- Copie o CSS gerado: cole as propriedades do container pai no seu CSS e, se utilizar posicionamento absoluto, aplique as regras correspondentes no elemento filho.
Centralizar div no meio da tela
Para conseguir centralizar div no meio da tela do navegador, não basta aplicar as propriedades de alinhamento; o container pai precisa ter uma altura definida. Caso o elemento pai não ocupe a tela toda, a centralização vertical parecerá não funcionar.
A prática recomendada é atribuir height: 100vh ou height: 100dvh ao container pai. Isso garante que o pai ocupe toda a altura da viewport, permitindo que propriedades como align-items: center posicionem o elemento filho exatamente no centro vertical e horizontal da tela.
Centralizar div flexbox
O Flexbox é a técnica mais comum para alinhar elementos. Para ativar esse modelo de layout, adicione display: flex ao container pai.
No fluxo horizontal padrão (quando flex-direction é row), a propriedade justify-content: center alinha os elementos ao longo do eixo principal (horizontal). Já a propriedade align-items: center faz o alinhamento no eixo transversal (vertical).
Se você alterar o fluxo para coluna usando flex-direction: column, os eixos são invertidos: justify-content passará a controlar o eixo vertical, enquanto align-items controlará o eixo horizontal.
Centralizar elemento CSS com Grid ou Posicionamento Absoluto
Com o CSS Grid, é possível centralizar um elemento em uma só declaração. Basta definir display: grid no container pai e adicionar place-items: center para alinhar o filho em ambos os eixos ao mesmo tempo.
O posicionamento absoluto funciona de forma diferente. O container pai precisa ter position: relative para criar o contexto de alinhamento. O elemento filho recebe position: absolute; top: 50%; left: 50%;, além de transform: translate(-50%, -50%) para compensar a própria largura e altura.
Atenção: o posicionamento absoluto costuma ser a opção menos flexível porque consegue tirar o elemento do fluxo normal do documento, o que pode fazer com que a altura do container pai colapse se não houver outros elementos definindo seu tamanho.
Centralizar botão CSS, imagens e blocos de texto
Uma dúvida comum é como aplicar essas regras a elementos específicos, como botões ou imagens. A estrutura é exatamente a mesma aplicada a uma div genérica.
Para alinhar um botão ou uma imagem, envolva o elemento em um container pai e aplique as regras de Flexbox ou Grid nesse pai. O botão ou imagem funcionará como o elemento filho e ficará centralizado sem a necessidade de adicionar regras complexas diretamente nele.
Para centralizar texto dentro de seu próprio bloco, a propriedade indicada é text-align: center diretamente no elemento de texto. Caso queira posicionar o bloco de texto inteiro no centro da página, utilize as técnicas de Flexbox ou Grid no container pai.
Perguntas frequentes
Como centralizar uma div na horizontal e na vertical no CSS?
A forma mais direta com Flexbox é aplicar display flex, justify-content center e align-items center no container pai. Com CSS Grid, basta aplicar display grid e place-items center no pai para obter o mesmo resultado em apenas uma linha de código.
Como centralizar uma div no meio da tela no CSS?
Para centralizar uma div no meio da tela, defina a altura do container pai como 100vh ou 100dvh para preencher toda a viewport. Em seguida, aplique display flex junto com justify-content center e align-items center no container pai.
Como centralizar uma div usando Flexbox?
Defina display flex no container pai para ativar o layout flexível. Adicione justify-content center para alinhar no eixo principal e align-items center para alinhar no eixo transversal.
Como centralizar uma div sem usar Flexbox?
Você pode usar CSS Grid aplicando display grid e place-items center no container pai. Outra opção é utilizar posicionamento absoluto: defina position relative no pai e position absolute no filho com top 50%, left 50% e transform translate(-50%, -50%).
Como centralizar uma div com position absolute?
Aplique position relative no container pai para estabelecer o contexto de posicionamento. No elemento filho, defina position absolute, top 50% e left 50%, e adicione transform translate(-50%, -50%) para deslocar o elemento de volta pela metade do seu próprio tamanho.
Por que o justify-content: center não está funcionando?
A propriedade justify-content só produz efeito quando o container pai tem display flex ou display grid ativo. Além disso, em containers flex com flex-direction column, o justify-content passa a controlar o eixo vertical em vez do horizontal.
Como centralizar um botão ou imagem no CSS?
Botões e imagens seguem as mesmas regras de qualquer outro elemento filho. Coloque o botão ou imagem dentro de um container pai e atribua a esse pai as propriedades display flex, justify-content center e align-items center.
Como centralizar div horizontal no CSS?
Em um container Flexbox com fluxo padrão em linha, aplique apenas justify-content center no container pai. No CSS Grid, utilize justify-content center no pai. Com posicionamento absoluto, defina left 50% e transform translateX(-50%) no elemento filho.
