Entrar

Existe alguna manera de centrar verticalmente una DIV?

gussiglo21 · · Solicitar retirada
Estimados, sigo con mi aprendizaje sobre DIVS, pero aún no le encuentro la vuelta a algunas cosas.

Quisiera conseguir centrar verticalmente una DIV, sea cual fuere la altura dada a la ventana del navegador.

Obviamente si por su contenido la altura de la DIV fuese mayor que la altura del área visible de página estaría bueno conseguir que el contenido no se "meta debajo" del área de controles del navegador, pero si esto no se puede hacer, con centrar el contenido verticalmente me conformo.

¿Cómo puede hacerse esto?

De antemano muchas gracias!
GusSiglo21
Web-Freelance · · Solicitar retirada
Hola gus, no te entiendo muy bien ¿quieres que el div siempre sea visible en la página aunque hagas scroll? Si es así deberás usar javascript para ello.

Saludos!
gussiglo21 · · Solicitar retirada
Hola WebFreelance
Trataré de explicarlo mejor con la figura adjunta



1)
Como primera medida, lo que me gustaría saber cómo se hace es que las distancias verticales A y B
se mantengan iguales independientemente de la altura que se le de a la ventana del explorador de internet.
A eso le llamo "centrado vertical" o alineación vertical", al igual que lo que se hace con el texto dentro de las celdas de una tabla donde puedes hacer que el texto se pegue arriba, abajo, o que fluya exactamente alrededor del medio de la celda.
Es eso mismo pero que la DIV quede siempre alineada verticalmente al centro del área útil de página de un explorador de internet.

2)
Luego, como segunda opción es: si el explorador de internet se redimensionase con muy poca altura
la altura de la DIV podría llegar a sobrepasar la altura del área de página. O sea, ser más alta que el área de página visible.
Entonces si fuese posible, sería bueno lograr que la DIV no se "esconda" bajo los bordes superior e inferior del área de página visible.
Pero esta segunda parte suena más complicada.

Con saber cómo hacer la 1) ya estaría bueno y suficiente para mi.

¿Ahora se entendió mejor?
Muchas gracias!
GusSiglo21
Web-Freelance · · Solicitar retirada
Bueno Gus, pues te he preparado algo en Javascript. Con este código que te voy a pasar ahora (ya que ignoro otra forma de hacerlo que no sea javascript), el div central se queda totalmente centrado verticalmente independientemente del tamaño de este, siempre que no supere el alto de la ventana claro:

<html>
<head>
<title>Pruebas de centrado vertical</title>
<script type="text/javascript">
function centrarDiv(){
	altoGlobal = document.getElementById('global').clientHeight;
	altoCentral = document.getElementById('centrado_vertical').clientHeight;
	calcula = altoGlobal - altoCentral;
	calcula2 = calcula / 2;
	document.getElementById('centrado_vertical').style.marginTop = calcula2+'px';
	
}
</script>

<style type="text/css">
#global {
	height: 100%;
	width: 100%;
	position:absolute;
}
#centrado_vertical {
	height: auto;
	width: 950px;
	margin: auto auto auto auto;;
	border: 1px solid #06F;
}
html,body{
	margin:0px;
	height:100%;
}
</style>
</head>

<body onload="javascript:centrarDiv();">
<div id="global">
  <div id="centrado_vertical">
    <p>Contenido del DIV centrado</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </div>
</div>
</body>
</html>

Es importante que los estilos no los cambies, solo el width y el border del #centrado_vertical que será a tu gusto.

Pruébalo, funciona en todos los navegadores. Ahora bien, habría que currarse algo para que, al cambiar de tamaño la ventana, vuelva a redimensionar, ya que si pruebas ahora, verás que al cambiar el tamaño de la ventana del navegador, el div no se vuelve a centrar hasta que recargas la página. No creo que sea tarea dificil. A ver que tal.

Saludos!
gussiglo21 · · Solicitar retirada
Recién veo tu mensaje Web-Freelance

Probaré ese código apenas pueda

Muchas gracias!

GusSiglo21