Centrar <div...> de acuerdo a pantalla

[MauricioCr]

Hola a todos.

Espero que alguien me pueda ayudar con esta situacion y se los agradecere mucho.

Tendo un <div> oculto en una pagina y en determinado momento al hacer clic el usuario el <div> aparece y centrado con JS.
El problema es que quiero que aparezca centrado pero en la pantalla de acuerdo donde este el usuario navegando tomando en cuenta que puede esta navegando muy abajo de la pagina.

Espero me halla explicado bien.

Gracias de antemano.

Mauricio

[Fernand0]

Código javascript:

var Div=document.getElementById('div');
Div.style.position='fixed';
 
var w=parseInt(Div.style.width);
var h=parseInt(Div.style.height);
 
Div.style.left=(document.body.offsetWidth/2-(w/2))+'px';
Div.style.top=(document.body.offsetHeight/2-(h/2))+'px';
 

[MauricioCr]

Gracias FernandO por su interes en ayudar, pero esto me hace que lo ponga en el centro de la pagina, pero si la pagina mide 2000px me lo ubica en los 1000, pero si el usuario esta al principio de la pagina no vera el <div>

Gracias

[genuine_carlosV2]

Prueba con CSS, yo tengo este código para centrar DIVs:

Código:

.centrado {
	position: absolute;
	width: 600px;  /*Tamaño del DIV*/
	height: 200px;  /*Tamaño del DIV*/
	left: 50%;
	top: 50%;
	margin-left: -300px;  /*Tamaño del DIV entre 2*/
	margin-top: -100px;  /*Tamaño del DIV entre 2*/
}

[MauricioCr]

Gracias genuine_carlosV2 por su interes en ayudar tambien, pero sucede igual que con el anterior ejemplo, me lo centra arriba y yo estando abajo.

Aqui el ejemplo: http://fotonaturaleza.net/ejemplo.htm

En la imagen primera el div se muestra bien, pero en la imagen del final de la pagina lo pone arriba y centrado, y lo nesecito si, centrado pero donde este la parte de la pantalla donde esta el usuario.

Gracias

[genuine_carlosV2]

En mi código, cambia 'absolute' por 'fixed' y problema solucionado ;)

[EPROM]

Estimado... esta es la solución

Código:

var Div=document.getElementById('div');
Div.style.position= "absolute";
Div.style.width= 40;
Div.style.height= 20; 
Div.style.display = "";
var ypos = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
Div.style.left = (screen.availWidth-40)/2 + 'px';
Div.style.top = (screen.availHeight-20)/2 + ypos - 70 + 'px';

SALUDOS

[Fernand0]

Código HTML:

<style>
* { margin: 0; }
html, body { width: 100%; height: 100%; }
</style> 

Código javascript:

function mau()
{
var Div=document.getElementById('div');
Div.style.position='fixed';
Div.style.display='block';
 
var w=parseInt(Div.style.width);
var h=parseInt(Div.style.height);
 
Div.style.left=(document.body.offsetWidth/2-(w/2))+'px';
Div.style.top=(document.body.offsetHeight/2-(h/2))+'px';
}
 

si lo queres hacer con JS... es asi... necesitas tener el body obviamente con una medida 100%...

si "simplemente" queres que este en el centro.. usa CSS como te dice genuine_carlosV2

[MauricioCr]

Excelente, muchas gracias a ambos!

Se los agradezco.. ;)