Como centralizar verticalmente um texto com CSS

Talvez uma das dúvidas mais frequentes sobre centralizar verticalmente seja como centralizar um texto em uma div, input ou botão. Aqui vou ensinar 3 técnicas para centralizar verticalmente um texto.
Usando line-height do mesmo tamanho do height
Um jeito bem simples é aplicar um line-height com o mesmo tamanho do height. Desta forma a altura da linha irá preencher todo o espaço, porém só funciona quando você tiver apenas 1 linha de texto.
div {
height: 100px;
line-height: 100px;
text-align: center;
border: 2px solid gold;
}
<div>
WebTutorial
</div>
Simulando uma tabela com display table
Outra maneira é usar display: table no elemento externo e display: table-cell no interno (com texto). Agora para centralizar é só aplicar vertical-align: middle no elemento interno.
div {
display: table;
height: 100px;
text-align: center;
border: 2px solid gold;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>WebTutorial</span>
</div>
Alinhar texto verticalmente com Flexbox
Talvez a melhor alternativa, utilizando flexbox. Para alinhar o texto verticalmente usando flexbox é só aplicar display: flex e align-items: center no elemento.
div {
height: 100px;
text-align: center;
border: 2px solid gold;
/* código para compatibilidade com vários navegadores */
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
/* código para compatibilidade com vários navegadores */
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
<div>
WebTutorial
</div>