Centrar DIV (V e H)

OldMan

Power Member
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:wscared:- 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
 
Última edição:
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).

A mim aparece-me tudo bem centrado...tanto no firefox como no IE mesmo qnd reduzo o tamanho da janela..
 
Boas, isto não é a solução ideal-gostava de saber qual é, mas sinceramente acho que não deve existir:wscared:- mas funciona no Ie6 e FF:
EDIT: esquece la isto, vou tentar adicionar um onResize...
edit2: já funciona
Obrigado, mas também me parece que não é solução ideal.

A mim aparece-me tudo bem centrado...tanto no firefox como no IE mesmo qnd reduzo o tamanho da janela..
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
 
Última edição:
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.
 
Pesquisa aqui no forum já respondi a essa questão várias vezes.

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.

Picture+1.png


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
 
Última edição:
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.
 
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.
 
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
 
Back
Topo