Centralizar div verticalmente CSS

Uma das tarefas comuns ao criar layouts responsivos em CSS é centralizar elementos verticalmente. Você pode precisar centralizar um <div> dentro de uma página ou centralizar algum conteúdo dentro de um elemento pai.

Há várias maneiras de fazer isso, e neste guia, exploraremos algumas das técnicas mais comuns para centralizar um <div> verticalmente usando CSS.

Método 1: Flexbox

O Flexbox é uma das melhores opções para centralizar elementos verticalmente. Ele oferece um modelo de layout flexível e fácil de usar.

O primeiro passo é definir um elemento pai como contêiner flex usando a propriedade display: flex. Em seguida, use as seguintes propriedades para centralizar o <div> verticalmente:

.container {
  display: flex;
  align-items: center; /* Centraliza verticalmente */
  justify-content: center; /* Centraliza horizontalmente */
}

Exemplo:

<div class="container">
  <div>Conteúdo a ser centralizado</div>
</div>

Método 2: Position + Transform

Outra técnica popular é usar as propriedades position e transform do CSS.

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centraliza vertical e horizontalmente */
}

Exemplo:

<div class="container">
  <div class="child">Conteúdo a ser centralizado</div>
</div>

Método 3: Table + Table-cell

Você também pode usar a propriedade display: table junto com display: table-cell para centralizar verticalmente um <div>.

.container {
  display: table;
  height: 100%;
  width: 100%;
}

.child {
  display: table-cell;
  vertical-align: middle; /* Centraliza verticalmente */
  text-align: center; /* Centraliza horizontalmente */
}

Exemplo:

<div class="container">
  <div class="child">Conteúdo a ser centralizado</div>
</div>

Essas são apenas algumas das técnicas mais comuns para centralizar um <div> verticalmente usando CSS. Existem outras maneiras de conseguir o mesmo resultado. Experimente as diferentes técnicas e escolha a que melhor se adequa às necessidades específicas do seu layout.