Como centralizar verticalmente o conteúdo de um elemento?
Para centralizar verticalmente o conteúdo de um elemento, você pode usar a propriedade CSS display: flex
em seu elemento pai e, em seguida, configurar as propriedades align-items
e justify-content
como center
.
Por exemplo, considere o seguinte trecho de HTML:
<div class="container">
<div class="content">
<p>Conteúdo centralizado verticalmente</p>
</div>
</div>
E o seguinte trecho de CSS:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 300px; /* Apenas um valor para exemplificar a altura do container */
background-color: #f2f2f2; /* Apenas para visualização */
}
.content {
text-align: center; /* Centralizar horizontalmente */
}
Nesse exemplo, a classe .container
contém a configuração display: flex
, que faz com que o conteúdo dentro dela seja alinhado verticalmente. Em seguida, as propriedades align-items
e justify-content
são configuradas como center
, para garantir tanto o alinhamento vertical quanto o horizontal.
É importante mencionar que o elemento pai deve ter uma altura definida para que o alinhamento vertical seja visível. No exemplo acima, atribuímos uma altura de 300 pixels para a classe .container
, a fim de visualizar o alinhamento.
Dessa forma, o conteúdo dentro do elemento <p>
será centralizado verticalmente dentro do elemento pai <div class="content">
.