Centralizar horizontalmente e verticalmente com display flex
333d 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>
.center {
background-color: lightblue;
height: 200px;
width: 200px;
}
O resultado inicial será esse:
![](https://api.insights.ionited.io/upload/4j3lvxrxlnktswgo.png)
Agora vamos adicionar a propriedade display com valor flex, na nossa classe .center:
display: flex:
justify-content: 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;
}
![](https://api.insights.ionited.io/upload/4j3lvxrxlnktzyrj.png)
Comentários (0)