Voltar para o site

Centralizando verticalmente com CSS

Publicado em: 18/09/2006

Autor: Dusan Janovský
URL do original: https://www.jakpsatweb....solution.html
Título original: Vertical Centering in CSS
Traduzido com autorização expressa do autor

Introdução

Uma solução definitiva criada por Yuhu, para alturas não definidas.

Embora exista a propriedade CSS vertical-align, ela não funciona de modo semelhante ao atributo valign do HTML para as tabelas. Assim a propriedade CSS vertical-align não é capaz de resolver o problema.

Definição do problema

  • existe na página uma área (p.ex.: uma <div>) com altura definida;
  • um objeto qualquer (tipicamente um texto longo contido em uma <div>) está dentro da <div> citada acima. Eu não conheço a altura da <div> que contém o texto longo (p.ex:. porque este texto longo é gerado dinamicamente de um banco de dados);
  • eu quero centrar verticalmente o objeto qualquer dentro da área citada acima;
  • não pretendo usar tabelas HTML para centrar.

Nenhuma solução geral era conhecida até ontem. Eu encontrei a solução na rua Wilson, quando estava voltando para casa. Ver um exemplo no navegador. (NT: Não funciona no IE7)

A idéia

A chave para a solução no Internet Explorer: o objeto a centrar é posicionado de forma absoluta no meio da área. A seguir é movido para cima de uma distância igual a metade da sua altura. Mas, o Internet Explorer interpreta interpreta, erroneamente, a altura definida em porcentagem com base na altura do elemento aninhado. Assim, é preciso uma <div> extra para o IE Explorer.

A solução para navegadores standard como o Mozilla, o Opera, o Safari etc. é completamente diferente. A área (<div> mais externa) é definida para ser renderizada como tabela (com uso da declaração display: table; das CSS2). O objeto interno é definido para ser renderizado como célula de tabela (com uso da declaração display: table-cell;. Contudo, agora podemos usar a propriedade vertical-align para estes elementos pois ela irá funcionar em navegadores standard. (Neste caso o Internet Exlorer ignora esta propriedade não lhe oferecendo suporte.)

Assim podemos combinar as regras de estilo. Eu usei o Pixy's underscore hack. Uma propriedade CSS quando escrita iniciando com underscore torna-se visível apenas para o Internet Explorer (todas as versões versão 6 e abaixo), sendo ignorada por navegadores standard. O hack tralha é visível para a versão Internet Explorer 7 (p.ex:. os IE6 e abaixo entendem _position: absolute; os IE 7 e abaixo entendem #position: absolute; e outros navegadores não). O hack tralha é válido, mas se você não quiser usá-lo poderá se valer de outro mais estruturado como mostrado mais adiante. (não funciona no IE7)

Compatibilidade

O código a seguir funciona nos Internet Explorer 5.0, 5.5, 6.0 e 7, em navegadores Gecko (Mozilla, Firefox, Netscape 7), no Opera 7, Konqueror 3.3.1. (talvez anteriores também) e no Safari. A página pode ser em HTML ou XHTML, modo standard ou modo quirk.

Ambos os exemplos não funcionam no IE 5.2 para Mac. Como eu não tenho Mac, não posso realizar testes. Por favor informe s(dusan@pc-slany.cz) se você conseguir uma maneira de solucionar.

O código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* bordas para maior visibilidade do exemplo */
  </style>
</head>
  
<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; _top: -50%">
 aqui texto<br>
 aqui textot<br>
 aqui mais conteúdo, de um banco de dados por exemplo<br>
 tudo centrado na vertical     
</div>
</div>
</div>
</body>
</html>

Ver este exemplo no navegador

Legenda para cores:

Estilização para todos os navegadores
Estilização para navegadores standard
Estilização somente para o Internet Explorer

O resultado é:

aqui texto
aqui texto
aqui mais conteúdo, de um banco de dados por exemplo
tudo centrado na vertical

Ver este exemplo no navegador

Agora vamos a um código mais estruturado e sem hacks

Esta solução sem hacks não funciona no IE7 em modo standard. Se você pretende servir o IE7 use a solução com hack mostrada anteriormente.

O exemplo mostrado não é ideal, mas eu espero que você tenha entendido. É possível obter o mesmo efeito de uma maneira diferente. Como mostro a seguir:

 <div id="outer">
  <div id="middle">
    <div id="inner">
      aqui texto
      aqui texto
      aqui mais conteúdo, de um banco de dados por exemplo
      tudo centrado na vertical
    </div>
  </div>
</div>

E as regras de estilo válidas e estruturadas:

 <style type="text/css">
  #outer {height: 400px; overflow: hidden; position: relative;}
      #outer[id] {display: table; position: static;}
      
     #middle {position: absolute; top: 50%;} /* para o IE */
      #middle[id] {display: table-cell; vertical-align: middle; position: static;}
      
      #inner {position: relative; top: -50%} /* para o IE */
      /* opcional: #inner[id] {position: static;} */
</style>

Ver este exemplo válido no navegador (é igual ao mostrado anteriormente).

Legenda para cores:

Estilização somente para o Internet Explorer
Estilização para navegadores standard

O seletor CSS2 #value[id] é equivalente ao seletor #value, mas o Internet Explorer não reconhece este tipo de seletor. Genericamente: syntax *[foo] significa qualquer elemento com o atributo foo. Qualquer elemento HTML #qualquer deve ter o atributo definido para "qualquer". Este é o macete -- #value[id] funciona somente em navegadores standard (de modo idêntico funciona para classes .value[class])

Para o Internet Explorer define-se position para absolute e relative. A definição position: static para navegadores standards restabelece o posicionamento default (anulando o efeito do posicionamento top para o IE).

Como centrar verticalmente na janela do navegador

Usamos a mesma técnica com mais algumas declarações de estilo:

<style>
  body, html {height: 100%;}>
  #outer {height: 100%; overflow: visible;} /*  overflow pode ser omitido */
  ...
</style>

Pode parecer que as declarações para #outer sejam suficientes, mas não são. É necessário declarar altura igual a 100% para body e html para estabelecer a referência de cálculo das porcentagens. Aqui é melhor não declarar overflow: hidden (como fizemos no exemplo acima), porque se o conteúdo da página torná-la maior em altura do que a altura da janela, não será possível rolar a página.

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo