Boas! Já estou farto de procurar e não encontro nenhuma solução minimamente decente... Já estive aqui e nenhuma dessas resulta a 100%. O meu objectivo é centrar uma div tanto na horizontal como na vertical, mas só consigo uma ou outra (separadamente). Aquele método das margens negativas não é solução e nunca devia ter sido inventado (digo eu). Neste momento tenho isto (centrada na horizontal): Código: html, body { height: 100%; margin: 0px; padding; 0px; } #contentdiv { width: 100%; height: 100%; background-color: #006600; } #centerdiv { height: 525px; width: 240px; margin: 0 auto; background-color: #ff0000; } Check Como é que a partir daqui consigo centrar verticalmente? Obrigado
Boas, isto não é a solução ideal-gostava de saber qual é, mas sinceramente acho que não deve existir- mas funciona no Ie6 e FF: Código: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>centrado na horizontal</title> <style type="text/css"> html, body { height: 100%; margin: 0px; padding; 0px; } #contentdiv { height: 100%; background-color: #006600; } #centerdiv { height: 525px; width: 240px; background-color: #ff0000; } </style> <script language="javascript"> function margin(){ co_h=document.getElementById("contentdiv").clientHeight; ce_h=document.getElementById("centerdiv").clientHeight; co_w=document.getElementById("contentdiv").clientWidth; ce_w=document.getElementById("centerdiv").clientWidth; t=(co_h-ce_h)/2; l=(co_w-ce_w)/2; e=document.getElementById("contentdiv"); e.style.paddingTop= t+'px'; e.style.paddingLeft= l+'px'; } </script> </head> <body onload="margin()" onresize="margin()"> <div id="contentdiv"> <div id="centerdiv">se diminuirem o tamanho da janela do browser na vertical a certa altura vão deixar de conseguir ver este texto e nem sequer vão ter acesso a ele pelo scroll. </div> </div> </body> </html> EDIT: esquece la isto, vou tentar adicionar um onResize... edit2: já funciona
A mim aparece-me tudo bem centrado...tanto no firefox como no IE mesmo qnd reduzo o tamanho da janela..
Obrigado, mas também me parece que não é solução ideal. Reduz drasticamente de maneira a que o rectângulo vermelho não caiba no browser. Aquele pessoal que tem portáteis com ecrãs menores de 10'' não conseguem ver o site completo com esse método das margens...
Parece que consegui resolver o problema razoavelmente. Agora o que me "preocupa" é uma questão de compatibilidade. FFox 3.0 @ mac: check! Safari 4 @ mac: check! Camino 1.5.4 @ mac: check! FFox 2.0 @ win: check! FFox 3.0 @ win: check! IE 7 @ win: check! IE 6 @ win: FAIL! Ainda há muita gente que use o IE6?
Podes tentar: html, body { height: 100%; margin: 0px; padding: 0px; } #contentdiv { height: 100%; background-color: #006600; overflow: visible; padding-top:5%; margin:auto; } #centerdiv { height: 80%; width: 240px; background-color: #ff0000; } A questão é que esse 10'' têm resolução de 1280x600 se descontares o browser deve ficar em +/- 480 de altura. A tua div tem 525px ou a defines em %(como em cima) ou com um valor inferior que permita que seja mostrada na íntegra mesmo em resoluções + pequenas. Não que seja a melhor, mas acho que só com css esta solução é a menos má. Se encontrares outra solução diz qq coisa. Epá não tinha visto o teu último post, já agora diz como é que fizeste. O Ie6 eu só uso por causa dos animais que o usam... http://www.w3schools.com/browsers/browsers_stats.asp
Vê aqui. Na verdade não está centrada verticalmente, apenas dei um padding e parece-me melhor assim. O resultado no site ficou melhor que nesse exemplo.
Já tinha visto alguns posts teus antes de fazer este tópico, mas tenho ideia que todos eles usavam o método das margens negativas para centrar verticalmente. Isso é uma má solução. Reparem na posição do scroll e o texto que [não] aparece. Link
Centrar, Centro, Horizontal, Vertical, Div, HTML CENTRAR UM DIV HORIZONTALMENTE: Código: [B]CSS:[/B] <style type="text/css"> #divcentrado { margin: 0 auto; width:500px; } </style> [B]HTML[/B]: <div id="divcentrado"> Este div está centrado na horizontal </div> CENTRAR UM DIV VERTICALMENTE: Código: CSS: <style type="text/css"> #centrado_v{ height:200px; width:500px; position:absolute; top:50%; left:50%; margin-top:-100px; /* metade de height:200px; */ margin-left:-250px; /*metade de width:500px */ background: green; } </style> [B]HTML[/B]: <div id="centrado_v">Este div também está centrado na vertical</div> O resultado podes ver aqui. fonte http://www.dezinerfolio.com/2007/05/02/the-simplest-way-to-horizontally-and-vertically-center-a-div/ PS. Se não consegues visualizar o div centrado, testa com outros navegadores, pois no meu computador não há problema nenhum. CENTRAR UM DIV VERTICALMENTE (OUTRO MODO) Código: [B]CSS: [/B]<style type="text/css"> #centrado_v{ min-height: 200px; display: table-cell; vertical-align: middle; background: green; } </style> [B]HTML:[/B] <div id="centrado_v"> Este div também está centrado na vertical ! </div> fonte: http://www.w3.org/Style/Examples/007/center#vertical
O problema não é centrar a div, o problema é centrar DEVIDAMENTE. Como disse no post acima essa solução das margens negativas não é solução! Ela aparece centrada, mas se eu encolher o tamanho da janela do browser deixo de poder aceder ao conteúdo. Isso acontecia-me porque eu tenho uma div na vertical (mais alta do que larga) e deixava de conseguir aceder ao conteúdo lá de cima, seja no Safari ou FireFox.
Havia um método meio manhoso, com tabelas, mas também está longe de ser o método mais correcto... Consistia em ter uma tabela só com uma célula, a ocupar 100% de altura e largura. Dentro dessa célula, com os alinhamentos vertical e horizontal definidos para o centro, o conteúdo ficava todo centrado.
Neste caso, não me choca a utilização menos "religiosa" das tabelas. O chato é q basta utilizares um DTD minimamente actual e a solução deixa de funcionar...
Eu usei esse método das tabelas noutra página que só vai ser vista por quem usar o IE6 ou inferior. Para não me preocupar muito com isso meti um texto dentro da tabela a dizer para actualizar o browser.
OldMan, Mesmo já parecendo que tenhas resolvido, acho que este link pode ser interessante para a discussão: http://www.w3.org/Style/Examples/007/center Eventualmente poderás tentar colmatar essa falha (a meu ver não muito grave) do IE6 desta forma (não confirmo).
Inicialmente usei esse método que fala no primeiro site para centrar verticalmente mas por outro motivo que já não me lembro agora não podia ter o display como table-cell... Posso testar isso outra vez amanha e se afinal eu é que estava enganado venho cá postar de novo. Obrigado