CSS

Centralizar texto verticalmente em CSS é algo bem mais complexo do que fazer o mesmo na horizontal, pois, desde os primórdios do CSS você pode utilizar a propriedade text-align: center;  par deixar o texto no meio do elemento que preferir.

Neste artigo você vai encontrar algumas maneiras diferentes para alinhar texto no centro da tela (na vertical), cada uma delas poderá ser utilizada em um caso diferente, dependendo exclusivamente do que você precisa para sua aplicação.

Uma das maneiras mais simples para realizar este procedimento é simulando que o elemento pai é uma tabela e o elemento filho uma linha dessa tabela, veja a simplicidade de se realizar este procedimento abaixo.

Simulando uma tabela

Você vai precisar de um elemento pai e um ou vários elementos filhos, veja:

HTML

<div class="pai">
  <div class="filho">
    <h1>Meu texto</h1>
    <p>O texto do texto hehe.</p>
  </div>
</div>

CSS

.pai {
  display: table;
  background: #dfdfdf; /* Não necessário */
}
.filho {
  display: table-cell;
  vertical-align: middle;
  height: 500px; /* Não necessário */
  width: 50%; /* Não necessário */
  text-align: center; /* Não necessário */
}

As propriedades comentadas como “Não necessário” são apenas para que você possa ter uma simulação visual do que irá acontecer.

Observação: Funciona do IE8 pra cima.

Line-height e height

Você também pode combinar algumas opções para atingir o mesmo objetivo, veja:

HTML

<div class="pai">
  <div class="filho">
    <h1>Meu texto</h1>
    <p>O texto do texto hehe.</p>
  </div>
</div>

CSS

.pai {
  display: block;
  height: 500px;
  line-height: 500px;
  width: 50%; /* Não necessário */
  background: #dfdfdf; /* Não necessário */
  text-align: center; /* Não necessário */
}
.filho {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.5;
}

O exemplo acima é praticamente a mesma coisa exibida na primeira demonstração. Veja uma demonstração:

Observação: Funciona do IE8 pra cima.

Utilizando pseudo-elemento

Continuando com o mesmo HTML dos exemplos anteriores, aqui segue uma maneira um pouco mais moderna de alinhar texto verticalmente com CSS:

.pai {
  height: 300px; /* Não necessário */
  width: 50%; /* Não necessário */
  background: #dfdfdf; /* Não necessário */
  text-align: center; /* Não necessário */
}
.pai:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.filho {
  display: inline-block;
  vertical-align: middle;
}

Observação: Funciona do IE8 pra cima.

Utilizando position

O problema da utilização de position: absolute;  para alinhar texto verticalmente em um navegador é que tudo deverá ser fixo, isso não é nem um pouco dinâmico para os padrões atuais. A parte boa é que isso funciona em todos os navegadores, até no IE6.

O HTML continua sendo o mesmo dos primeiros exemplos, veja o CSS:

.pai {
  position: relative;
  height: 300px; /* Não necessário */
  width: 50%; /* Não necessário */
  background: #dfdfdf; /* Não necessário */
}
.filho {
  position: absolute;
  height: 120px;
  top: 50%;
  margin-top: -60px; /* Metade da altura */
  width: 140px;
  left: 50%;
  margin-left: -80px; /* Metade da largura */ 
}

Com CSS3

Há algum tempo falamos sobre Flexbox e na minha opinião já está mais do que na hora de começarmos a utilizar suas propriedades em nossos projetos. Veja como tudo fica mais simples.

O HTML continua o mesmo:

<div class="pai">
  <div class="filho">
    <h1>Meu texto</h1>
    <p>O texto do texto hehe.</p>
  </div>
</div>

O CSS3 ficaria assim:

.pai {
  display: flex;
  justify-content: center;
  height: 300px; /* Não necessário */
  width: 50%; /* Não necessário */
  background: #dfdfdf; /* Não necessário */
}
.filho {
  align-self: center;
}

Veja uma demonstração: Codepen

Observação: Talvez funcione no IE10 (com prefixo) e posteriores.

Concluindo

Estes foram alguns métodos que consegui lembrar no momento, se você tiver algum método interessante envie nos comentários pra gente ver.

Até o próximo!