How to center a div in CSS?

Question

Estou tentando centralizar uma div horizontalmente e verticalmente.

Já tentei usar margin:auto mas não funcionou.


.container {
    width: 300px;
    height: 300px;
}

Qual é a forma correta atualmente?

Answer 1

Use Flexbox:


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

Answer 2

Também pode usar Grid:


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

Answer 3

Flexbox costuma ser a solução mais usada hoje.

3 Answers