Centrar DIV verticalmente

Takitei · #1 (**permalink**) 04/04/2005, 16:39

Hola a todos...

Tengo un div asi:

<div id="main-wrapper"></div>

Quiero que ese div quede centrado verticalmente en la página. ¿Qué propiedad debo usar?...

Thankz in advance!

frijolerou · #2 (**permalink**) 04/04/2005, 21:34

Un ejemplo:

Código HTML:

<html>
<head>
<style type="text/css">
#contenedor{
    position:absolute;
    height:200px;
    width:400px;
    border:1px solid black;

    top:50%;
    margin-top:-100px; /*el negativo de la mitad de la altura del div*/
    }
</style>
</head>
<body>
<div id="contenedor">
contenido
</div>
</body>
</html>

Takitei · #3 (**permalink**) 05/04/2005, 12:05

¿No hay una propiedad directa que permita hacerlo?

Remo:Erdosain · #4 (**permalink**) 05/04/2005, 12:48

En CSS, no.
Por cierto, al código anterior le falta

Código:

html,body {height:100%}

o me parece?

Takitei · #5 (**permalink**) 05/04/2005, 16:41

¿Y si hacemos un div que ocupe el 100% de la ventana verticalmente... (algo asi como height:100%) y luego el contenido (el cual es una imagen) lo pongo centrado usando "background:url(images/logo.gif) no-repeat center center" ???

El problema es que height:100% no me funciona!!!

Remo:Erdosain · #6 (**permalink**) 05/04/2005, 21:27

Lo que decis de usar una imagen de fondo es totalmente posible, pero en principio vos querías centrar un DIV.
Por cierto, sería bueno que incluyeras una página tuya mostrando que height:100% no te funciona.

Takitei · #7 (**permalink**) 06/04/2005, 17:02

Bueno... centrar el DIV o centrar el contenido del DIV me da igual. Lo que me interesa es que la imagen que esta dentro del DIV quede totalmente centrada en la pantalla, sin importar la resolución.

El code es:

Código HTML:

<body>
<div id="main-wrapper">&nbsp;</div>
</body>

Luego el CSS es asi:

Código:

#main-wrapper{
	margin:0px auto;
	background:url(images/logo.gif) no-repeat center center;
	height:100%;
	width:400px;
}

Aunque... hice esto y me funcionó:

Código:

body{
	background:url(images/logo.gif) no-repeat center center;
}

jesusbet · #8 (**permalink**) 06/04/2005, 20:10

y no te funca magin: auto???

lo que nosotros usamos es margin: auto para centrar bloques, pero nunca se nos ha presentado la necesidad de centrar divs verticalmente, aunque poniendo un padding-bottom: Npx; padding-top: Npx; también puede funcionar, donde N es el mismo número, padding también puede sustituirse por margin.

saludos

Remo:Erdosain · #9 (**permalink**) 06/04/2005, 21:13

Habrá agregado el DTD?

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

jesusbet · #10 (**permalink**) 06/04/2005, 21:15

el dtd no tiene nada que ver en como el navegador interprete tu documento...

saludos

Remo:Erdosain · #11 (**permalink**) 06/04/2005, 23:43

Sacrilegio! El DTD sí hace la diferencia, sobre todo con navegadores actuales.
¿Sabías que IE6/Win no acepta margin:auto para centrar a menos que incluyas el DTD?

jesusbet · #12 (**permalink**) 07/04/2005, 07:59

no, no sabía, grax por la info... en cuanto al div, echas un grito si te funciona o no...

saludos

Takitei · #13 (**permalink**) 07/04/2005, 16:10

No el div no funciona centrado verticalmente. Any way... ya resolví usando el body y centrando la imagen.

Por cierto, si estoy usando el DTD para XHTML Strict.