Foros del Web » Programando para Internet » Javascript »

centrar un div verticalmente

Estas en el tema de centrar un div verticalmente en el foro de Javascript en Foros del Web. Hola, normalmente centraria un div con css, pero tengo un problema el documento es dinamico es decir que no siempre tiene la misma altura lo ...
  #1 (permalink)  
Antiguo 25/03/2015, 14:51
 
Fecha de Ingreso: abril-2011
Mensajes: 867
Antigüedad: 13 años
Puntos: 5
centrar un div verticalmente

Hola, normalmente centraria un div con css, pero tengo un problema el documento es dinamico es decir que no siempre tiene la misma altura lo que quiero es centrar un div que creo en javascript en medio de la ventana donde el usuario esta en ese momento, alguna idea de como hacerlo?
  #2 (permalink)  
Antiguo 25/03/2015, 15:19
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: centrar un div verticalmente

El alto de la pantalla dividido entre dos menos el alto del bloque dividido entre dos
http://help.dottoro.com/ljuxqbfx.php
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 25/03/2015, 15:30
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 10 años, 7 meses
Puntos: 145
Respuesta: centrar un div verticalmente

Cita:
Iniciado por IsaBelM Ver Mensaje
El alto de la pantalla dividido entre dos menos el alto del bloque dividido entre dos
http://help.dottoro.com/ljuxqbfx.php
¿Y si el bloque establece sus dimensiones según el contenido?
¿Se podrían obtener las dimensiones de ese contenedor por JS? Pero no sería dinámico...
__________________
¿Te sirvió la respuesta? Deja un +1
  #4 (permalink)  
Antiguo 25/03/2015, 15:38
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: centrar un div verticalmente

Hay maneras de hacer con CSS lo que pretendes, pero ya que preguntas en el foro de JavaScript, yo lo haría así:

Código Javascript:
Ver original
  1. var div = document.querySelector("#id del elemento"),
  2.     divWidth, divHeight, winWidth, winHeight,
  3.     centrar = function(){
  4.         divWidth = parseInt(getComputedStyle(div).width);
  5.         divHeight = parseInt(getComputedStyle(div).height);
  6.         winWidth = this.innerWidth;
  7.         winHeight = this.innerHeight;
  8.        
  9.         div.style.top = (((winHeight / 2) - (divHeight / 2)) + this.scrollY) + "px";
  10.         div.style.left = (((winWidth / 2) - (divWidth / 2)) + this.scrollX) + "px";
  11.     };
  12.  
  13. window.addEventListener("load", centrar, false);
  14. window.addEventListener("resize", centrar, false);

Lo que hago es simple. Tomo al elemento a centrar, declaro algunas variables que usaré más adelante y una función con la cual centraré al elemento en cuestión. En dicha función, tomo los valores computados del ancho y alto del elemento que centraré, así como el ancho y alto interno de la ventana (incluidas las barras de desplazamiento).

Enseguida, centro al elemento mediante las propiedades top y left, para lo cual, el elemento deberá de tener una posición absoluta para poder establecer una posición con respecto al elemento que lo contiene.

Para que quede alineado verticalmente, tomo la mitad de la altura de la ventana y la resto con la mitad de la altura del elemento a centrar, luego, a dicho resultado, le sumo la cantidad de píxeles desplazados por la barra de desplazamiento vertical (lee las notas de este enlace) y al resultado final, le concateno el prefijo 'px' para indicarle al navegador que desplazaré verticalmente N píxeles al elemento. Para el alineado horizontal, el proceso es similar, solo que con los valores a lo ancho.

DEMO

La función de centrado se ejecutará cada vez que cargue la ventana o esta sea redimensionada, por lo que el alineado será dinámico.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #5 (permalink)  
Antiguo 26/03/2015, 08:59
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: centrar un div verticalmente

a ver, es sencillo
Cita:
<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">

* {
margin: 0;
border: none;
position: relative;
}



body {
width: 100%;
height: 100%;
font-size: 100%;
}



div.bloque {
width: auto;
min-height: 20%;
height: auto;
position: absolute;
padding: 30px;
border: 1px solid rgb(138, 177, 186);
}

</style>
<script type="text/javascript">
window.addEventListener('load', function() {

var bloque = document.querySelector('.bloque');
var altobloque = bloque.offsetHeight;
var scrin = this.innerHeight;

bloque.style.top = ((scrin / 2) - (altobloque / 2)) + 'px';

var temp = setInterval(function() {

bloque.innerHTML += '<br />Nueva línea';

var nuevoaltobloque = bloque.offsetHeight;

bloque.style.top = ((scrin / 2) - (nuevoaltobloque / 2)) + 'px';

}, 3000);


}, false);
</script>
</head>
<body>

<div class="bloque">Texto por defecto</div>

</body>
</html>
en caso que la página tenga scroll sumale el scrollY
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: verticalmente
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:47.