centrar un div verticalmente

roboty · #1 (**permalink**) 25/03/2015, 14:51

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?

IsaBelM · #2 (**permalink**) 25/03/2015, 15:19

El alto de la pantalla dividido entre dos menos el alto del bloque dividido entre dos
http://help.dottoro.com/ljuxqbfx.php

NueveReinas · #3 (**permalink**) 25/03/2015, 15:30

Cita:

Iniciado por IsaBelM

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...

Alexis88 · #4 (**permalink**) 25/03/2015, 15:38

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 originalvar div = document.querySelector("#id del elemento"),
    divWidth, divHeight, winWidth, winHeight,
    centrar = function(){
        divWidth = parseInt(getComputedStyle(div).width);
        divHeight = parseInt(getComputedStyle(div).height);
        winWidth = this.innerWidth;
        winHeight = this.innerHeight;
        
        div.style.top = (((winHeight / 2) - (divHeight / 2)) + this.scrollY) + "px";
        div.style.left = (((winWidth / 2) - (divWidth / 2)) + this.scrollX) + "px";
    };
 
window.addEventListener("load", centrar, false);
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

IsaBelM · #5 (**permalink**) 26/03/2015, 08:59

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