65 formas de centralizar uma <div>

🎯 O Evento Canônico de Todo Desenvolvedor: Centralizar uma Div

No universo do desenvolvimento de software, existem situações inevitáveis — aquelas que todo desenvolvedor, cedo ou tarde, vai enfrentar.
Inspirado em Homem-Aranha: Através do Aranhaverso, gosto de chamar esse tipo de situação de evento canônico.

Ou seja:
se tu ainda não passou por isso… fica tranquilo. Vai passar.

🤯 “Como diabos eu vou centralizar essa div?”

Entre todos os eventos canônicos do desenvolvimento front-end, poucos são tão universais quanto a clássica pergunta:

Como diabos eu vou centralizar essa div?

Essa situação não escolhe vítima:

Acontece com quem está começando no front-end
E também com quem é back-end, mas caiu de paraquedas na interface por “só um ajuste rápido”

(Spoiler: nunca é só um ajuste rápido.)

📚 Um Guia Nada Modesto Sobre Centralização

Pensando nisso, resolvi transformar esse sofrimento coletivo em algo útil.
Aqui você não vai encontrar uma ou duas soluções, mas sim:

🧠 65 maneiras diferentes de centralizar uma div

Todas organizadas de forma clara, separadas por conceitos e abordagens do CSS, pra facilitar o entendimento e evitar aquele famoso copiar e colar sem saber por quê.

Métodos abordados neste guia:

🔹 Flexbox
🔹 Grid
🔹 Position + Transform
🔹 Margin e alinhamento clássico

A ideia aqui não é só resolver o problema, mas também entender por que existem tantas formas diferentes — e qual delas faz mais sentido em cada cenário.

Cada exemplo parte desta estrutura base:

<div class="container">
  <div class="box">Centro</div>
</div>

1–20 · 🔹 Flexbox

O Flexbox é, sem exagero, o método mais usado hoje pra centralizar elementos — e com razão.
Ele foi criado justamente pra resolver problemas de alinhamento e distribuição de espaço.

Quando um elemento pai recebe display: flex, ele ganha controle total sobre seus filhos, permitindo alinhar conteúdo tanto no eixo horizontal quanto no vertical com pouquíssas linhas de código.

Por que funciona tão bem?

Centraliza horizontal e vertical facilmente
É responsivo por natureza
Funciona bem em layouts simples e complexos

Quando usar?

Centralização de cards, botões, modais
Layouts em linha ou coluna
Sempre que quiser resolver rápido e sem dor emocional

1

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

2

.container {
  display: flex;
  place-content: center;
}

3

.container {
  display: flex;
  place-items: center;
}

4

.container {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

5

.container {
  display: flex;
}

.box {
  margin: auto;
}

6

.container {
  display: flex;
  justify-content: center;
}

7

.container {
  display: flex;
  align-items: center;
}

8

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

9

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

10

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

11

.container {
  display: flex;
}

.box {
  align-self: center;
  margin: auto;
}

12

.container {
  display: flex;
  justify-content: center;
}

.box {
  align-self: center;
}

13

.container {
  display: flex;
  align-items: center;
}

.box {
  margin-inline: auto;
}

14

.container {
  display: flex;
  place-items: center;
}

15

.container {
  display: flex;
  place-content: center center;
}

16

.container {
  display: flex;
  justify-content: center;
}

17

.container {
  display: flex;
  align-items: center;
}

18

.container {
  display: flex;
  justify-content: space-around;
}

19

.container {
  display: flex;
  justify-content: space-evenly;
}

20

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  margin: auto;
}

21–40 · 🔹 Grid

O CSS Grid é o método mais poderoso da lista — e, consequentemente, o mais subestimado pra tarefas simples como centralizar uma div.

Ele trabalha com linhas e colunas, permitindo posicionar elementos com extrema precisão.
Apesar de ser mais conhecido por layouts complexos, o Grid também centraliza com elegância (e certo ar de superioridade técnica).

Vantagens

Controle absoluto de layout
Centralização extremamente clara
Ideal pra estruturas maiores

Quando usar?

Layouts de página
Dashboards
Quando o projeto já usa Grid e você quer manter consistência

21

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

22

.container {
  display: grid;
  place-content: center;
}

23

.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

24

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}

25

.container {
  display: inline-grid;
  place-items: center;
}

26

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

27

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

28

.container {
  display: grid;
}

.box {
  place-self: center;
}

29

.container {
  display: grid;
}

.box {
  justify-self: center;
  align-self: center;
}

30

.container {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

31

.container {
  display: grid;
  align-items: center;
}

32

.container {
  display: grid;
  justify-items: center;
}

33

.container {
  display: grid;
  align-content: center;
}

34

.container {
  display: grid;
  justify-content: center;
}

35

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

36

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

37

.container {
  display: grid;
  width: 100%;
  place-items: center;
}

38

.container {
  display: grid;
  min-height: 100%;
  place-content: center;
}

39

.container {
  display: grid;
}

.box {
  margin: auto;
}

40

.container {
  display: grid;
}

.box {
  inset: 0;
  margin: auto;
}

41–55 · 🔹 Position + Transform

Esse é o método clássico raiz, usado muito antes de Flexbox e Grid dominarem o mundo.

Aqui, o elemento é posicionado de forma absoluta em relação ao pai e depois ajustado com transform.
Funciona? Funciona.
É intuitivo? Nem sempre.

Por que ainda existe?

Compatível com projetos antigos
Útil quando não dá pra mexer no layout do pai
Resolve cenários bem específicos

Pontos de atenção

Depende de position: relative no elemento pai
Pode ficar confuso rápido
Exige mais cuidado em layouts responsivos

41

.container {
  position: relative;
}

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

42

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

43

.container {
  position: relative;
}

.box {
  position: absolute;
  inset: 0;
  margin: auto;
}

44

.box {
  position: fixed;
  inset: 0;
  margin: auto;
}

45

.container {
  position: relative;
}

.box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

46

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

47

.box {
  position: absolute;
  left: calc(50% - 50px);
}

48

.box {
  position: absolute;
  top: calc(50% - 50px);
}

49

.box {
  position: absolute;
  margin: auto;
}

50

.box {
  position: fixed;
  margin: auto;
}

51

.container {
  position: relative;
}

.box {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
}

52

.box {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

53

.box {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

54

.box {
  position: absolute;
  inset: auto;
  margin: auto;
}

55

.box {
  transform: translate(50vw, 50vh);
}

56–65 · 🔹 Margin e alinhamento clássico

Esse é o método da velha guarda do CSS.
Antes de Flexbox existir, a gente centralizava elementos usando margin: auto e alinhamento de texto.

Ele funciona muito bem — desde que o contexto seja simples e previsível.

O que ele resolve bem?

Centralização horizontal
Elementos com largura definida
Layouts simples e estáticos

Limitações

Não centraliza verticalmente com facilidade
Não funciona bem pra layouts complexos
Pouco flexível (sem trocadilho)

56

.box {
  margin: 0 auto;
}

57

.box {
  margin-left: auto;
  margin-right: auto;
}

58

.box {
  margin: auto;
}

59

.container {
  text-align: center;
}

.box {
  display: inline-block;
}

60

.container {
  line-height: 200px;
  text-align: center;
}

61

.box {
  display: table;
  margin: auto;
}

62

.container {
  display: table-cell;
  vertical-align: middle;
}

63

.box {
  display: inline-table;
  margin: auto;
}

64

.box {
  display: block;
  margin-inline: auto;
}

65

.box {
  float: none;
  margin: auto;
}

🧠 Qual método devo usar?

Não existe resposta única — existe contexto.

Quer rapidez e clareza? → Flexbox
Layout estruturado e escalável? → Grid
Cenário legado ou restrições estranhas? → Position + Transform
Algo simples e direto? → Margin clássico

No fim das contas, o importante não é qual método você usa,
mas sim saber por que está usando ele — e não outro.

Centralizar uma div pode até ser um evento canônico…
mas sofrer por isso não precisa ser.