Centralizar usando CSS

Márcio d'Ávila, 10 de novembro de 2004. Revis�o 2, 11 de maio de 2008.
Categoria: Internet: Cliente: DHTML

Centralizar blocos horizontalmente

N�o existe em CSS1 ou CSS2 um estilo direto de alinhamento centralizado para a posi��o de elementos HTML de bloco, como DIV, P e TABLE, entre outros, que seja diretamente equivalente ao antigo atributo HTML align="center" (deprecado na especifica��es HTML 4 e XHTML 1 estritas).

Apresentamos aqui v�rias t�cnicas para centraliza��o horizontal de blocos de forma impl�cita, envolvendo as propriedades CSS de largura, posi��o horizontal e margens esquerda e direita do bloco. A maioria das t�cnicas pode tamb�m ser aplicada � centraliza��o vertical, fazendo uma equival�ncia com as propriedades de altura, posi��o vertical e margens superior e inferior do bloco, respectivamente.

Blocos com margem definida

Se a largura do bloco n�o for especificada e pudermos escolher o tamanho das margens, seja em uma unidade de medida absoluta (como pixels) ou relativa (como porcentual), definimos os estilos margin-left (margem esquerda) e margin-right (direita) do bloco com valores iguais para centraliz�-lo. A largura do bloco centralizado ficar� implicitamente definida como toda a largura restante entre suas margens:

margin-left: 10%; margin-right: 10%;
OK: Margens esquerda e direita iguais, usando unidade relativa.

O exemplo anterior usa unidade de medida relativa. A seguir, usando unidade absoluta:

margin-left: 50px; margin-right: 50px;
OK: Margens esquerda e direita iguais, usando unidade absoluta.

Blocos com largura definida

Largura porcentual (%)

Se tivermos um bloco com largura definida em valores porcentuais (em rela��o � largura total dispon�vel na p�gina), para centraliz�-lo basta calcular a margem esquerda como metade da largura restante. Assim, se o bloco tem largura 80%, restam portanto 20% da largura total da p�gina, que devem ser distribu�dos em duas partes iguais. Definindo a margem esquerda do bloco como 10% (20 ÷ 2), por conseq��ncia teremos os 10% restantes equitativamente � sua direita. Desta forma, n�o � necess�rio um estilo definindo a margem direita.

Traduzindo a id�ia em CSS, teremos o estilo width: 80%; margin-left: 10%; para o bloco. Este m�todo funciona bem no Mozilla/Firefox testado (1.7/1.0), mas apresenta um problema no Internet Explorer (6 SP2). Veja o exemplo:

width: 80%; margin-left: 10%;
Problema: Largura resultante � 72% no Internet Explorer ≤ 6.

Bug: Neste exemplo, o Internet Explorer testado (6 SP2) primeiro aplica a a margem esquerda de 10% do bloco, e em seguida calcula sua largura como 80% do espa�o restante da largura da p�gina, j� descontados os 10% do total usados na margem esquerda do bloco. Assim, o bloco tem 80% dos 90% restantes na largura da p�gina, ou seja, 72% da largura total da p�gina. Com isso, al�m de ficar com a largura incorreta, o bloco n�o fica centralizado, pois ter� 10% da largura da p�gina � sua esquerda e 18% � direita. O Internet Explorer 7 corrigiu o problema e exibe corretamente o bloco centralizado com 80% da largura total.

A centraliza��o de bloco usando margens laterais baseia-se nas regras de posicionamento est�tico (static) padr�o de um bloco. O mesmo princ�pio de centralizar "matematicamente" o bloco pode ser aplicado quando se usa posicionamento relativo (position: relative), definindo a posi��o esquerda (left), ao inv�s da margem. Para mais informa��es sobre os esquemas de posicionamento em CSS, veja a refer�ncia para a especifica��o de CSS2, apresentada ao final do texto. Veja o exemplo com posicionamento relativo do bloco e defini��o da sua posi��o esquerda left: 10%:

width: 80%; left: 10%; position: relative;
OK: Funciona nos navegadores Mozilla/Firefox e Internet Explorer.

Note que para blocos com largura percentual, podemos tamb�m aplicar o primeiro exemplo j� visto para blocos com margem definida. A id�ia � que se definirmos margens esquerda e direita 10%, estamos implicitamente definindo a largura do bloco em 80%.

Largura fixa

Quando a largura do bloco � definida com um valor fixo (em certa unidade de medida), podemos usar novamente o posicionamento relativo (position: relative) para colocar a posi��o do bloco no centro horizontal da p�gina, definindo sua posi��o horizontal � partir da esquerda (left) como 50%. Veja o resultado deste primeiro passo, a seguir, onde o bloco ainda n�o est� centralizado, mas sim posicionado ao centro (definimos este bloco com largura apenas 360px para que seja inteiramente v�s�vel em resolu��o 800x600):

width: 360px; position: relative; left: 50%;
Passo 1: Posi��o esquerda no centro horizontal (50%).

Para efetivamente centralizar o bloco, precisamos fazer com que n�o sua lateral esquerda, mas sim seu centro horizontal, coincida com essa posi��o central. Para isso, recuamos o bloco � esquerda em metade da sua largura, definindo sua mergem esquerda negativa (- width/2). Por exemplo, para um bloco de largura 600 pixels, definimos sua margem esquerda como -300 pixels:

width: 600px; position: relative; left: 50%; margin-left: -300px;
OK: Posi��o esquerda no centro horizontal (50%), margem esquerda negativa em metade da largura do bloco (- width/2).

Outra t�cnica aplic�vel a blocos de largura fixa � o uso de margem autom�tica, conforme o t�pico adiante.

Margem autom�tica

Ao inv�s de calcularmos manualmente o valor para as margens laterais do bloco, podemos usar o recurso de margem autom�tica do CSS 2, usando o valor auto para ambas as margens esquerda e direita do bloco com largura definida:

width: 80%; margin-left: auto; margin-right: auto;
Problema: o Internet Explorer ≤ 6 n�o reconhece o valor auto e n�o centraliza o bloco.

Bug: o Internet Explorer at� o 6 SP2 n�o reconhece o valor auto e simplesmente o ignora, de forma que o bloco n�o � centralizado e fica em sua posi��o padr�o junto � margem esquerda da p�gina. O Internet Explorer 7 corrigiu o problema e passou a reconhecer e tratar corretamente o auto.

Para contornar o bug do Internet Explorer 6, uma alternativa de centraliza��o seria colocar o bloco dentro de outro, sendo que o bloco externo tenha estilo de texto centralizado (text-align: center). O Internet Explorer (7 inclusive) centraliza n�o s� o texto, mas tem o efeito colateral de indevidamente centralizar tamb�m o bloco interno em si. Veja o exemplo de um bloco dentro de um DIV com estilo text-align: center.

width: 80%;
Problemas: O text-align: center do DIV externo s� centraliza (indevidamente) o bloco interno no Internet Explorer. E o texto fica centralizado.

O efeito colateral inesperado do Internet Explorer, por�m, n�o tem nenhum efeito no navegador Mozilla/Firefox, que corretamente mant�m a posi��o do bloco interno � esquerda, centralizando apenas o texto dentro dele. Uma solu��o para se obter a centraliza��o. Al�m disso, quando se deseja centralizar apenas o bloco, a centraliza��o do texto dentro dele � um efeito indesejado.

Eis ent�o como combinar os recursos vistos para contornar os problemas no Internet Explorer 6- e ao mesmo tempo garantir a centraliza��o em navegadores que funcionam segundo o padr�o: Para o Internet Explorer, colocar o bloco dentro de uma regi�o com estilo text-align: center. Para anular o efeito do texto centralizado definido neste bloco externo, redefinir no bloco interno o estilo de volta para text-align: left. Para contemplar o Mozilla/Firefox e outros navegadores conformantes com o padr�o, definimos tamb�m as margens esquerda e direita como auto. Como resultado temos:

DIV externo: text-align: center
width: 80%; text-align: left; margin-left: auto; margin-right: auto;
OK: Centraliza apenas o bloco tanto no Internet Explorer quanto no Mozilla/Firefox.

Se voc� n�o quiser suportar o Internet Explorer vers�o 6 e inferiores, basta utilizar o primeiro exemplo apresentado de margem autom�tica, que funciona no Internet Explorer 7, Firefox e outros browsers mais atuais.

Blocos de largura vari�vel

Vimos at� agora t�cnicas de posicionamento quando ou a largura do bloco ou as margens laterais s�o especificadas. Mas a tabela (elemento TABLE) � um tipo particular de bloco que permite largura vari�vel. Quando n�o � especificada uma largura arbitr�ria para uma tabela nem suas c�lulas, o navegador define sua largura automaticamente em fun��o do conte�do dentro da tabela.

Felizmente, a combina��o de recursos aplicada no exemplo final da se��o anterior, sobre margem autom�tica, funciona igualmente bem para tabelas (TABLE) de largura autom�tica, assim como para blocos de largura definida.

Para facilitar, vamos organizar os estilos utilizados na centraliza��o em uma classe chamada "center", que deve ser simplesmente aplicada a um DIV englobando um ou mais blocos internos — DIV, P, TABLE, ou outro que voc� precise — com posi��o horizontal centralizada:

<style type="text/css">
div.center {
    text-align: center;
}
div.center div, div.center p, div.center table, div.center form {
    text-align: left; margin-left: auto; margin-right: auto;
}
</style>
<div class="center">
     bloco(s) ...
</div>

Veja exemplos, todos dentro de um DIV da classe "center", onde foi aplicado um fundo azul adicional para melhor visualiza��o.

TABLE (tabela) de largura autom�tica com duas c�lulas

DIV (divis�o) de largura fixa, width: 500px;

P (par�grafo) de largura definida, width: 50%

FORM (formul�rio) com width: 500px

Refer�ncias


Firefox - A web de volta
Creative Commons License

© 2003-2020, Márcio d'Ávila, mhavila.com.br, direitos reservados. O texto e c�digo-fonte apresentados podem ser referenciados, distribu�dos e utilizados, desde que expressamente citada esta fonte e o crédito do(s) autor(es). A informação aqui apresentada, apesar de todo o esforço para garantir sua precisão e correção, é oferecida "como está", sem quaisquer garantias explícitas ou implícitas decorrentes de sua utilização ou suas conseqüências diretas e indiretas.