Como centralizar uma div: todos os métodos lado a lado
Como centralizar uma div
Como centralizar uma div: 7 métodos CSS, ao vivo e comparados | We.Inc
Centralize uma div na horizontal, na vertical ou nos dois sentidos. Alterne entre flexbox, grid, margin auto, posicionamento absoluto, text-align e line-height em uma mesma caixa, veja o CSS e quando cada um falha.
Centralizar uma div nos dois sentidos leva duas linhas no pai: display: grid; place-items: center; ou display: flex com justify-content: center e align-items: center. Só na horizontal, dê uma largura à div e margin-inline: auto. O pai precisa de uma altura maior que a do filho para a centralização vertical aparecer.
A versão curta
Necessidade
CSS no pai
Tailwind
Nos dois sentidos
display: grid; place-items: center
grid place-items-center
Nos dois sentidos
display: flex; justify-content: center; align-items: center
flex items-center justify-center
Bloco na horizontal
(no filho) margin-inline: auto + uma largura
mx-auto w-…
Sobre uma imagem
position: relative, filho com inset: 0 + margin: auto
relative / absolute inset-0 m-auto
Escolha um método e um eixo e a caixa da demo se move, o CSS do pai e do filho é escrito por extenso e uma nota diz onde aquele método falha. São sete técnicas, incluindo as antigas que você ainda vai encontrar em código existente, seguidas de uma tabela de decisão para escolher uma.
Escolha horizontal, vertical ou os dois.
Clique pelos métodos. Os que não conseguem centralizar no eixo escolhido avisam em vez de fingir.
Leia a nota de falha do método e copie o CSS ou as classes do Tailwind.
Consulte a tabela de decisão abaixo quando não tiver certeza de qual usar.
Quando algo não centraliza na vertical, coloque primeiro um contorno no pai. Em nove de cada dez casos ele só tem a altura do próprio conteúdo.
Prefira grid ou flex em código novo. Eles mantêm o filho no fluxo, então o pai continua crescendo ao redor dele.
Para centralizar um bloco de texto mantendo as linhas alinhadas à esquerda, centralize o bloco com margin-inline: auto e não mexa no text-align.
margin: auto em um filho de flex é um truque esperto: ele absorve o espaço livre de todos os lados e centraliza só aquele item.
Perguntas frequentes
Por que minha div não centraliza na vertical?
Normalmente porque o pai não tem altura sobrando. Um bloco só tem a altura do seu conteúdo, então não há espaço onde centralizar. Dê ao pai uma height, uma min-height (por exemplo 100dvh para tela cheia) ou deixe que ele se estique dentro de um layout flex ou grid mais alto.
Qual é o jeito mais curto de centralizar uma div?
display: grid; place-items: center; no pai. Isso centraliza o filho nos dois sentidos, funciona para qualquer tamanho de filho e não precisa de largura nem altura no filho.
Como centralizo uma div na página inteira?
Faça o body ou um contêiner ter pelo menos a altura do viewport: min-height: 100dvh; display: grid; place-items: center;. Para um modal que flutua sobre a página, use position: fixed; inset: 0; margin: auto; com largura e altura definidas, ou o elemento nativo dialog, que se centraliza sozinho.
margin: 0 auto ainda funciona?
Sim, para centralizar na horizontal um bloco com largura menor que a do pai. margin-inline: auto é a forma lógica moderna e não mexe nas margens de cima e de baixo.
Como centralizo uma div no Tailwind?
Coloque flex items-center justify-center, ou grid place-items-center, no pai e dê a ele uma altura como h-screen ou min-h-dvh. Para um bloco centralizado na horizontal, adicione mx-auto e uma largura ou max-width ao filho.
Duas direções, dois problemas diferentes
Centralizar na horizontal é fácil no layout de blocos porque a largura é conhecida: a largura do pai é definida pelo seu contêiner, então margens auto podem dividir o espaço que sobra. A altura é o oposto, ela é decidida pelo conteúdo, e é por isso que a centralização vertical exigiu truques durante anos.
O flexbox e o grid mudaram isso ao deixar o pai distribuir o espaço livre nos dois eixos. Quando o pai tem uma altura conhecida, as propriedades de alinhamento fazem o resto, e o filho continua no fluxo normal.
Quando os métodos antigos ainda fazem sentido
O posicionamento absoluto é o certo quando o elemento centralizado deve flutuar sobre outro conteúdo, como um botão de play sobre a miniatura de um vídeo ou um indicador de carregamento sobre um card. A versão com inset mais margin auto evita as bordas borradas de meio pixel que um translate pode gerar.
text-align ainda é o jeito mais rápido de centralizar um ícone ou botão inline dentro de uma linha de texto. A centralização com line-height só serve para selos de uma linha que você controla totalmente.
Tabela de decisão
Qual método para qual tarefa
Método
Horizontal
Vertical
Ambos
Cuidado com
Flexbox
Sim
Sim
Sim
A centralização vertical exige que o pai seja mais alto que o filho. Com flex-direction: column as duas propriedades trocam de eixo.
Grid place-items
Sim
Sim
Sim
Vários filhos se empilham em linhas, cada um centralizado na sua própria linha, então eles se espalham na vertical em vez de ficarem juntos. Envolva-os em um único elemento.
margin: auto
Sim
Não
Não
No fluxo normal de blocos ele só centraliza na horizontal, e só quando o filho tem largura menor que a do pai. Dentro de um pai flex ou grid, margin: auto centraliza nos dois sentidos.
Absolute + transform
Sim
Sim
Sim
O filho sai do fluxo, então o pai deixa de crescer ao redor dele. Deslocamentos de meio pixel podem borrar o texto, e o transform faz do filho um bloco de contenção e um contexto de empilhamento.
Absolute inset + margin auto
Sim
Sim
Sim
O filho precisa de um tamanho explícito no eixo centralizado. Sem ele, inset: 0 simplesmente estica o filho para preencher o pai. Larguras fit-content também funcionam nos navegadores atuais.
text-align: center
Sim
Não
Não
Só move conteúdo inline: texto, imagens, caixas inline-block. Uma div de bloco normal o ignora, e o texto dentro do filho também herda a centralização.
Não
Sim
Sim
Quebra assim que o texto passa para uma segunda linha, e a altura precisa ser fixada no código duas vezes. Serve para um selo ou botão de uma linha, mais nada.
Receitas prontas para copiar
Um card no meio da tela
Em uma página real, use min-height: 100dvh no contêiner. O quadro aqui usa uma altura fixa para caber.
Botão de play sobre uma miniatura
inset: 0 com margin: auto centraliza um filho de tamanho fixo sem transform, então as bordas ficam nítidas.
Um item centralizado, os outros nas bordas
Margens auto em um filho de flex ocupam todo o espaço livre, então o logo fica no meio da barra enquanto o menu e o carrinho ficam nas laterais.
A centralização vertical exige que o pai seja mais alto que o filho. Com flex-direction: column as duas propriedades trocam de eixo.
Vários filhos se empilham em linhas, cada um centralizado na sua própria linha, então eles se espalham na vertical em vez de ficarem juntos. Envolva-os em um único elemento.
No fluxo normal de blocos ele só centraliza na horizontal, e só quando o filho tem largura menor que a do pai. Dentro de um pai flex ou grid, margin: auto centraliza nos dois sentidos.
O filho sai do fluxo, então o pai deixa de crescer ao redor dele. Deslocamentos de meio pixel podem borrar o texto, e o transform faz do filho um bloco de contenção e um contexto de empilhamento.
O filho precisa de um tamanho explícito no eixo centralizado. Sem ele, inset: 0 simplesmente estica o filho para preencher o pai. Larguras fit-content também funcionam nos navegadores atuais.
Só move conteúdo inline: texto, imagens, caixas inline-block. Uma div de bloco normal o ignora, e o texto dentro do filho também herda a centralização.
Quebra assim que o texto passa para uma segunda linha, e a altura precisa ser fixada no código duas vezes. Serve para um selo ou botão de uma linha, mais nada.
Teste todos os métodos de centralização
Eixo
Centralizar
Método
Pai (tracejado) e filho (azul)
Caixa filha
Este método não consegue centralizar nesse eixo. A caixa mostra onde ela fica sem ele.