Docs executáveis de CSS: Centralizar div

Q: Como centralizar uma div na horizontal e na vertical?

Transforme o pai em grid e centralize o conteúdo: .parent { display: grid; place-items: center; }. A versão com flexbox é display: flex; justify-content: center; align-items: center;. Nos dois casos, o pai precisa de uma altura maior que a da div.

Q: Como centralizar uma div só na horizontal?

Dê a ela uma largura e margens laterais automáticas: .box { width: 300px; margin: 0 auto; } (ou max-width para um bloco responsivo). margin-inline: auto é a mesma coisa em propriedades lógicas.

Q: Qual é o jeito mais fácil de centralizar uma div?

display: grid; place-items: center; no pai: duas declarações, os dois eixos, filho de qualquer tamanho. Use flexbox quando o pai também organiza outros itens em linha.

Q: Como centralizar o texto dentro de uma div?

Use text-align: center na div para o texto e o conteúdo inline. Centralizar a div e centralizar o texto dentro dela são tarefas separadas.

A resposta curta

Para centralizar uma div na horizontal e na vertical dentro do pai, transforme o pai em grid e centralize o conteúdo:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

Isso funciona com filhos de qualquer tamanho e não exige nada no próprio filho. Abaixo estão seis métodos lado a lado. Cada caixa se mede depois de renderizada e mostra a distância entre o centro dela e o centro do pai:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

Os seis mostram 0px nos dois eixos (a borda de 1px do palco é igual em todos os lados, então não desloca o centro). Mude a largura ou o texto de uma caixa e rode de novo: os métodos que não dependem de um tamanho fixo continuam em 0.

Qual método usar

Método	Centraliza	O filho precisa de tamanho fixo?	Melhor para
Grid `place-items: center`	Os dois eixos	Não	A escolha padrão: um filho dentro de uma caixa
Flexbox `justify-content` + `align-items`	Os dois eixos	Não	Uma linha ou coluna de itens, centralizados como grupo
`margin: auto` em um pai flex ou grid	Os dois eixos	Não	Centralizar um item enquanto os irmãos seguem outro layout
`margin: 0 auto`	Só horizontal	Um `width` ou `max-width`	Contêineres de página, artigos, formulários no fluxo normal
Absolute + `translate(-50%, -50%)`	Os dois eixos	Não	Sobreposições, badges e modais por cima de outro conteúdo
Absolute + `inset: 0; margin: auto`	Os dois eixos	Sim, largura e altura	Diálogos de tamanho fixo
`align-content: center` em um bloco	Vertical	Não	Centralizar na vertical sem mudar o display do pai

Método 1: flexbox

O flexbox centraliza nos dois eixos com duas propriedades. justify-content cuida do eixo principal (horizontal em uma linha), e align-items do eixo cruzado:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

Com vários filhos, o flexbox os centraliza como um grupo, mantendo-os em linha. É aí que ele ganha do grid, que empilharia os três itens em uma coluna centralizada. A página do justify-content mostra todos os valores de alinhamento.

Método 2: grid

place-items: center é o shorthand de align-items: center mais justify-items: center. Em um contêiner grid com um único filho, ele centraliza esse filho nas duas direções:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

min-height em vez de height deixa o pai crescer se o card ficar mais alto que 180px, em vez de o card transbordar.

Método 3: margin: 0 auto (horizontal)

Um elemento de bloco com largura menor que o contêiner pode ser centralizado na horizontal com margens laterais automáticas. O navegador divide o espaço livre igualmente entre os dois lados:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

A segunda caixa ocupa a largura toda, então não há espaço livre e nada se move. Esse é o motivo comum de margin: 0 auto "não funcionar". Ela também só centraliza na horizontal no fluxo normal; ali, margens auto verticais viram 0. Dentro de um pai flex ou grid, porém, margin: auto centraliza nas duas direções, que é a terceira caixa da comparação acima.

Método 4: position absolute e transform

Quando o elemento precisa ficar por cima de outro conteúdo (um badge sobre uma foto, um modal sobre a página), posicione-o de forma absoluta em 50% e puxe-o de volta pela metade do próprio tamanho:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% coloca o canto superior esquerdo do elemento no centro. As porcentagens em translate() se referem ao tamanho do próprio elemento, então -50% o puxa de volta pela metade da largura e da altura, sejam quais forem. O pai precisa estar posicionado (position: relative), senão o elemento se centraliza na página. O posicionamento está na página de position.

Uma variação para elementos de tamanho conhecido: position: absolute; inset: 0; margin: auto; mais um width e um height. As margens auto dividem o espaço nos quatro lados.

Método 5: align-content em um bloco comum

align-content: center agora também funciona em contêineres de bloco comuns, não só em flex e grid. Ele centraliza o conteúdo na vertical sem mudar como os filhos são dispostos:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

Ele é suportado nas versões atuais de Chrome, Firefox e Safari. Navegadores mais antigos o ignoram, então use grid se precisar dar suporte a eles.

Centralizar na tela inteira

Para centralizar um diálogo na viewport independentemente da rolagem, combine uma camada fixa de tela cheia com grid:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

Para centralizar na vertical o conteúdo de uma página inteira, use min-height: 100dvh no pai em vez de 100vh: no celular, 100vh inclui a área atrás das barras do navegador, e o "centro" fica baixo demais.

Centralizar texto é outra tarefa

Tudo acima centraliza uma caixa. Para centralizar o texto dentro de uma caixa, use text-align: center nela, como mostra a página de centralizar texto no HTML. Muitas vezes você precisa dos dois: grid para centralizar o card e text-align para centralizar as linhas dentro dele.

Erros comuns

Um pai sem altura. A centralização vertical precisa de espaço livre; um pai que encolhe até o conteúdo não tem nenhum.
margin: 0 auto em um bloco de largura total. Dê a ele um width ou max-width primeiro.
margin: auto para centralizar na vertical no fluxo normal. Ali, margens auto verticais valem 0; use flex ou grid.
Centralização absoluta sem um pai posicionado. O elemento se centraliza na página, não na caixa.
align-items: center no filho. As propriedades de alinhamento vão no pai (o contêiner flex ou grid), com exceção de margin: auto e align-self.
text-align: center para centralizar um bloco. Ele centraliza o conteúdo inline (texto, imagens, filhos inline-block), não um filho block.

Perguntas frequentes

Como centralizar uma div na horizontal e na vertical?

Transforme o pai em grid e centralize o conteúdo: .parent { display: grid; place-items: center; }. A versão com flexbox é display: flex; justify-content: center; align-items: center;. Nos dois casos, o pai precisa de uma altura maior que a da div.

Como centralizar uma div só na horizontal?

Dê a ela uma largura e margens laterais automáticas: .box { width: 300px; margin: 0 auto; } (ou max-width para um bloco responsivo). margin-inline: auto é a mesma coisa em propriedades lógicas.

Por que margin: 0 auto não centraliza minha div?

A div não tem uma largura menor que o contêiner, então não sobra espaço livre para dividir (um bloco ocupa a largura toda por padrão). Defina width ou max-width. Ela também não faz nada em elementos inline e nunca centraliza na vertical no fluxo normal.

Por que minha div não centraliza na vertical?

O pai só tem a altura do próprio conteúdo, então não há espaço extra para centralizar. Dê uma altura ao pai (ou min-height) e use a centralização com grid ou flexbox.

Qual é o jeito mais fácil de centralizar uma div?

display: grid; place-items: center; no pai: duas declarações, os dois eixos, filho de qualquer tamanho. Use flexbox quando o pai também organiza outros itens em linha.

Como centralizar o texto dentro de uma div?

Use text-align: center na div para o texto e o conteúdo inline. Centralizar a div e centralizar o texto dentro dela são tarefas separadas.

Conceitos relacionados