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">.