Como alinhar verticalmente o texto em uma div

Ao trabalhar com uma div, às vezes é necessário garantir que o texto dentro dela esteja alinhado verticalmente no meio. Isso pode ser conseguido através de vários métodos.

Usando line-height

Se o div tiver uma altura fixa, como 50px, você pode simplesmente usar o line-height Propriedade CSS.

#abc {
  height: 50px;
  line-height: 50px;
}

Isso centralizará o texto verticalmente dentro do div.

Usando propriedades de exibição

Para texto de várias linhas, você pode envolvê-lo em um elemento span e aplicar propriedades de exibição e alinhamento vertical.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

Usando a propriedade transform

Outro método envolve o uso da propriedade transform com a função translateY(). Isso é especialmente útil para navegadores mais antigos que não suportam propriedades de exibição.

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}