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>

Referências

• How do I vertically center text with CSS?