Centralizar horizontalmente e verticalmente com display flex

251d atrás

0 0

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)

0/512
Link