Como centralizar verticalmente um texto com CSS

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