Centralizar horizontalmente e verticalmente com display flex

1a atrás

Centralizar elementos horizontalmente e verticalmente com #CSS muitas vezes pode ser uma tarefa complicada para iniciantes, entretanto com display flex, você pode atingir o resultado esperado facilmente.

Primeiro vamos adicionar uma div no HTML:

<div class="center">Texto centralizado</div>

E incluir alguns estilos básicos:

.center {
  background-color: lightblue;
  height: 200px;
  width: 200px;
}

O resultado inicial será esse:

Agora vamos adicionar a propriedade display com valor flex, na nossa classe .center:

display: flex:

Para alinhar horizontalmente usaremos a propriedade justify-content com o valor center:

justify-content: center;

E para alinhar verticalmente, align-items com o valor center:

align-items: center;

Esse vai ser o CSS final:

.center {
  align-items: center;
  background-color: lightblue;
  display: flex;
  height: 200px;
  justify-content: center;
  width: 200px;
}

E o resultado será uma div com conteúdo totalmente centralizado:

Comentários (0)