Centralizar texto verticalmente em CSS

Este artigo irá apresentar métodos para centralizar os textos verticalmente em CSS.

Use a propriedade line-height para centralizar o texto verticalmente em CSS

Podemos definir a altura da propriedade line-height como o div para centralizar o texto verticalmente em CSS. A propriedade line-height especifica a altura de uma linha. Pode ser ilustrado criando uma borda do elemento div. Também podemos usar a propriedade text-align e defini-la como center para alinhar o texto ao centro horizontalmente.

Por exemplo, crie um div em HTML e escreva o texto Hello World! entre. A seguir, em CSS, defina a altura do div para 200px. Além disso, defina a line-height com o mesmo valor. Alinhe o texto ao centro com a propriedade text-align. Crie uma borda solid de largura 3px na cor black usando a propriedade abreviada border.

No exemplo abaixo, definimos os mesmos pixels de line-height e height de div. Assim, ele centraliza o texto verticalmente. No entanto, esse método funciona apenas para textos de uma linha.

Código de exemplo:

<div>
    Hello World!
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}

Use as propriedades display, vertical-align e line-height para centralizar o texto verticalmente em CSS

Podemos centralizar o texto em várias linhas usando as diferentes propriedades CSS como display, vertical-align e line-height. A propriedade display define o comportamento de exibição de um elemento. A propriedade vertical-align é responsável pelo alinhamento vertical do elemento. Podemos definir display como inline-block e vertical-align para middle para obter o alinhamento vertical de várias linhas de texto.

Por exemplo, crie um div em HTML e escreva span dentro dele. Escreva o texto Hello e quebre a linha com <br> e depois escreva World! dentro da span. A seguir, em CSS, atribua line-height e height ao mesmo valor de 200px selecionando div. Dê uma borda ao div e alinhe o texto ao centro, como fizemos no primeiro método. Em seguida, selecione span e defina a propriedade display para inline-block. Em seguida, atribua o valor da propriedade middle à propriedade vertical-align. Finalmente, defina o valor de altura da linha para normal.

No exemplo abaixo, alteramos a propriedade line-height para normal em span para que as várias linhas de texto tenham a line-height normal. O valor inline-block iniciará a próxima linha do texto logo abaixo da linha acima. O valor middle da propriedade vertical-align colocará o texto no meio do eixo vertical.

Código de exemplo:

<div>
    <span>Hello <br> World! </span>
</div>

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 3px solid black;
}
span {
    display:inline-block;
    vertical-align: middle;
    line-height: normal;
}

Simule a exibição da tabela para centralizar verticalmente o texto em CSS

Podemos simular o texto como uma célula de tabela para centralizá-lo verticalmente em CSS. Usamos a propriedade display para simular uma tabela. Também usaremos a propriedade vertical-align para centralizar o texto verticalmente. Vamos trabalhar no trecho de HTML do segundo método e aplicar um novo CSS a ele.

Em primeiro lugar, selecione o div e defina a altura, largura e borda. Use a propriedade display e defina o valor para table. Isso fará com que o div atue como uma mesa. Em seguida, selecione span e defina a propriedade display para table-cell e a propriedade vertical-align para middle. Definir o elemento span como table-cell tornará o elemento como uma célula de tabela. Desta forma, podemos criar um texto centralizado verticalmente.

Código de exemplo:

<div>
    <span>Hello <br> World!</span>
</div>

div {
    display: table;
    height: 200px;
    width: 100%;
    text-align: center;
    border: 3px solid black;
}
span {
    display: table-cell;
    vertical-align: middle;
}