Atenção: Este método só é válido quando existe apenas uma linha na <div>.

HTML

1. Primeiro criamos a <div> onde vai o nosso texto.

<div class="top">
	<h1>Eu sou um título da página</h1>
</div>

 Veja como ficam nossos elementos HTML sem estilos:

CLASSES CSS

2. Agora vamos criar a classe "top" que irá definir o estilo para a <div> onde está o nosso texto. Nesta fase ainda não vamos alinhar o texto verticalmente:

.top {
  width:50%;
  height:90px;
  text-align:center;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
}

     Onde:

• width - Define a largura da div (que é 50% da largura total da página onde ficará a div);
• height - Define a altura da div em pixels;
• text-align - Centraliza o texto horizontalmente;
• margin: auto - Centraliza a div horizontalmente na página;
• background-color - Define a cor do fundo da div;
• font-family - Define a fonte do texto;
• color - Define a cor do texto;

Observação: Uma classe CSS poderá ser colocada no próprio documento HTML através das tags <style> </style> ou inseridas em uma arquivo ".css" externo.

 Veja abaixo como ficou o nosso exemplo sem a centralização vertical do texto:

CENTRALIZANDO O TEXTO VERTICALMENTE

3. Vamos agora mostrar o pulo do gato para você centralizar o texto verticalmente da forma mais simples possível: Na classe CSS "top", acrescente a propriedade line-height com o mesmo tamanho da altura do elemento div onde está o texto. No nosso exemplo, a propriedade line-height deverá ter o mesmo valor de height, que é 90px. Veja como fica o nosso código CSS final:

.top {
  width:50%;
  height:90px;
  line-height:90px;
  text-align:center;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
}

 DICA: Para centralizar imagens verticalmente, utilize a propriedade vertical-align.

RESULTADO FINAL

Veja agora o nosso texto centralizado verticalmente:

See the Pen MvGxRO by Angelo Luis Ferreira (@angeloalf) on CodePen.

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi feito o alinhamento vertical do texto do exemplo. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<div class="top">
	<h1>Eu sou um título da página</h1>
</div> 

 CSS

.top {
  width:50%;
  height:90px;
  line-height:90px;
  text-align:center;
  margin:auto;
  background-color:#ff0000;
  font-family:Arial;
  color:#fff; 
} 

COMENTÁRIOS