Existe alguna manera de centrar verticalmente una DIV?

**gussiglo21** · 10/07/2012, 04:36

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** · 10/07/2012, 16:03

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** · 10/07/2012, 17:00

Hola WebFreelance
Trataré de explicarlo mejor con la figura adjunta

div.jpg

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** · 11/07/2012, 16:25

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:

Código HTML:

<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** · 12/07/2012, 22:58

Recién veo tu mensaje Web-Freelance

Probaré ese código apenas pueda

Muchas gracias!

GusSiglo21

Tema: Existe alguna manera de centrar verticalmente una DIV?

Herramientas

Buscar Tema

Visualizar

Existe alguna manera de centrar verticalmente una DIV?

Temas Similares

Alinear los menus verticalmente

fondo repetido verticalmente

Permisos de Publicación