Como centralizar texto verticalmente em uma div usando CSS?

Configurando a Estrutura HTML

Crie uma estrutura HTML com um contêiner div e conteúdo de texto:

<div class="container">
  <p>Este texto será centralizado vertical e horizontalmente.</p>
</div>

Esta estrutura fornece uma base para trabalhar. O div externo é seu contêiner, e o parágrafo contém o texto que você deseja centralizar.

Aplicando Propriedades Flexbox

O Flexbox centraliza o conteúdo vertical e horizontalmente. Aplique estas propriedades CSS:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px; /* Define uma altura */
  border: 1px solid #ccc; /* Opcional: para visibilidade */
}

Aqui está o que essas propriedades fazem:

• display: flex transforma o contêiner em um contêiner flex.
• align-items: center centraliza os itens flex verticalmente.
• justify-content: center centraliza os itens flex horizontalmente.
• Defina uma height para o contêiner para ver a centralização vertical.

Este método funciona para texto de uma linha e múltiplas linhas. Ele se ajusta a diferentes tamanhos de tela.

.container {
  /* Alternativa para navegadores mais antigos */
  display: table;
  width: 100%;
  height: 200px;
}

.container p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

/* Flexbox para navegadores modernos */
@supports (display: flex) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container p {
    display: block;
  }
}

Configurando o CSS

A técnica de altura de linha centraliza texto de linha única verticalmente em uma div. Veja como configurá-la:

.container {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ccc;
}

Neste CSS:

• Defina a height da div para o valor desejado (100px neste exemplo).
• Iguale o line-height à altura da div. Isso empurra o texto para o centro.
• Adicione text-align: center para centralização horizontal.

A estrutura HTML é simples:

<div class="container">
  Texto Centralizado
</div>

Este método funciona fazendo o texto ocupar a altura total do container, empurrando-o para o meio.

.container {
  /* ... estilos existentes ... */
  white-space: nowrap;
  overflow: hidden;
}

Limitações do Método de Altura de Linha

Esta técnica tem algumas limitações:

• Funciona melhor para texto de linha única. Com várias linhas, o texto pode transbordar ou ser cortado.
• Para conteúdo de múltiplas linhas, este método pode causar problemas de espaçamento. Cada linha tentará ocupar a altura total do container.
• Se o texto for mais longo que a largura do container, ele quebrará e perderá o alinhamento vertical.

Por essas razões, a técnica de altura de linha é mais útil quando seu conteúdo permanecerá em uma única linha e se encaixa na largura do container.

Usando CSS para Criar Comportamento Semelhante a Tabela

O método de exibição de tabela usa CSS para criar um comportamento semelhante a uma tabela. Este método centraliza o texto verticalmente em uma div:

.container {
  display: table;
  height: 200px;
  width: 100%;
}

.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Aplique estes estilos ao seu HTML:

<div class="container">
  <div class="content">
    Seu texto vai aqui. Pode ser uma única linha ou várias linhas.
  </div>
</div>

Este CSS faz o seguinte:

• display: table na div pai cria uma estrutura semelhante a uma tabela.
• display: table-cell no elemento filho faz com que ele se comporte como uma célula de tabela.
• vertical-align: middle centraliza o conteúdo verticalmente dentro da célula.

.container {
  height: 50vh; /* 50% da altura da viewport */
}

Benefícios do Método de Exibição de Tabela

Este método tem várias vantagens:

1. Funciona para texto de uma ou várias linhas. O conteúdo se ajusta dentro do container.

2. Tem boa compatibilidade com navegadores, incluindo versões mais antigas do Internet Explorer.

3. A técnica é fácil de implementar e requer CSS mínimo.

4. Mantém o fluxo natural do texto, evitando problemas com quebras de linha ou transbordamento de texto.

Defina uma altura na div do container para ver o efeito de centralização vertical. Ajuste a largura conforme necessário para o seu layout.

Configurando o Contêiner de Grade

O CSS Grid oferece uma forma simples de centralizar texto verticalmente em uma div. Veja como configurar:

.container {
  display: grid;
  place-items: center;
  height: 200px;
  border: 1px solid #ccc;
}

Neste CSS:

• display: grid transforma o contêiner em um layout de grade.
• place-items: center centraliza o item da grade vertical e horizontalmente.

A estrutura HTML é simples:

<div class="container">
  <p>Este texto está centralizado usando CSS Grid.</p>
</div>

Este método centraliza o conteúdo independentemente do seu comprimento ou número de linhas.

Vantagens do CSS Grid

O CSS Grid tem vários benefícios para centralizar texto:

1. Precisa de poucas propriedades CSS para alcançar a centralização.

2. Funciona bem com diferentes tipos de conteúdo, incluindo texto de várias linhas, imagens ou elementos aninhados.

3. Os layouts de grade se adaptam a diferentes tamanhos de tela sem media queries adicionais.

4. Você não precisa adicionar elementos wrapper extras.

5. A grade permite o posicionamento exato de itens dentro do contêiner.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

@supports (display: grid) {
  .container {
    display: grid;
    place-items: center;
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  height: 200px;
  gap: 20px;
}

.item {
  text-align: center;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

O CSS Grid oferece uma solução limpa para centralizar texto verticalmente em uma div, tornando-o uma boa escolha para desenvolvimento web.

Técnica de Posicionamento Absoluto

A técnica de posicionamento absoluto centraliza o texto verticalmente usando propriedades de posicionamento CSS:

.container {
  position: relative;
  height: 200px;
  border: 1px solid #ccc;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Estrutura HTML:

<div class="container">
  <div class="text">Texto centralizado</div>
</div>

Este método funciona assim:

• position: relative no container cria um contexto de posicionamento.
• position: absolute no elemento de texto o retira do fluxo normal.
• top: 50% move o texto até a metade do container.
• left: 50% move o texto até a metade da largura do container.
• transform: translate(-50%, -50%) desloca o texto de volta pela metade de sua própria largura e altura.

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Método de Padding para Centralização de Texto

O método de padding usa padding igual no topo e na base para centralizar o texto verticalmente:

.container {
  padding: 50px 0;
  text-align: center;
  border: 1px solid #ccc;
}

Estrutura HTML:

<div class="container">
  <p>Texto centralizado usando padding</p>
</div>

Esta técnica funciona:

• Adicionando padding igual no topo e na base do container.
• Usando text-align: center para centralização horizontal.

Para design responsivo, use unidades de porcentagem ou viewport para o padding:

.container {
  padding: 10% 0;
}

Isso permite que o padding se ajuste com base na largura do container, mantendo o efeito de centralização em diferentes tamanhos de tela.

.container {
  padding: 50px 0;
  min-height: 200px;
}

Ambos os métodos oferecem opções para necessidades específicas de layout, com a técnica de posicionamento absoluto fornecendo controle preciso e o método de padding oferecendo simplicidade e responsividade.