Como posicionar um mergulho no meio da tela quando a página é maior que a tela

Olá I'm usando algo semelhante ao seguinte para posicionar um mergulho no meio da tela:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>

<div id="mydiv">Test Div</div>

No entanto, o problema com isso é que ele posiciona o item no meio da página e não na tela. Então, se a página estiver um pouco alta e I'm no topo da página (a parte superior da parte é exibida na tela) quando eu faço o div aparecer's nem mesmo na tela. Você tem que rolar para baixo para vê-la.

Alguém pode me dizer como você'faria isso aparecer no meio do ecrã?

Hussein
Pergunta editada :em
Programação
window html css center
16º fevereiro 2011 в 3:06
20 vistas
Solução

basta adicionar position:fixed e ele irá mantê-lo em vista mesmo se você rolar para baixo. veja-o em [http://jsfiddle.net/XEUbc/1/][1]

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
Hussein
Resposta editada :em
Comentários (2)

Acabei de testar esse código exato em uma página de teste e ele centrou o mergulho perfeitamente na página, mesmo com cerca de 100 **<br />*** antes de tentar empurrá-lo para baixo.

Talvez tente verificar o resto do seu código para ver se tem algo que está a sobreescrever os valores do DIV's ou que está a afectar o seu DIV para causar estes problemas.

Comentários (1)

Para isso você teria que detectar o tamanho da tela. Isso não é possível com CSS ou HTML; você precisa de JavaScript. Aqui está a entrada do Mozilla Developer Center nas propriedades da janela https://developer.mozilla.org/en/DOM/window#Properties

Detectar a altura e a posição disponíveis em conformidade.

Scott Radcliff
Resposta editada :em
Comentários (0)