centrar div?

crack16 · #1 (**permalink**) 25/04/2010, 11:48

hola esta pregunta debe ser bien comun en el foro.. he visto varios tutos

pues como centro un div vertical y horizontalmente

si mi contenedor mide 700x600px

espero que me puedan ayudar gracias

alexk · #2 (**permalink**) 25/04/2010, 12:10

margin: 0 auto;
--------------------
Antes de preguntar FAQ/s de CSS

crack16 · #3 (**permalink**) 25/04/2010, 13:45

yo estoy usando estos stilos

position: absolute;
left: 50%;
top: 50%;
width: 300px;
height: 200px;
margin-top: -100px;
margin-left: -150px;

overflow: auto;
border: 1px solid red;

pero cuando coloco las medidas de mi imagen q son 700 x 600px. no se llega a centrar

Immelman · #4 (**permalink**) 26/04/2010, 06:36

Amigo, es como te comentaron:

margin: 0 auto;

tienes que sacar los márgenes que tienes en este momento para que te funcione.

crack16 · #5 (**permalink**) 26/04/2010, 08:02

osea quedaria asi:

position: absolute;
left: 50%;
top: 50%;
width: 700px;
height: 600px;
margin-top: 0px;
margin-left: 0px;

Immelman · #6 (**permalink**) 26/04/2010, 09:32

Así:

position: absolute;
left: 50%;
top: 50%;
width: 700px;
height: 600px;
margin: 0 auto;

alexk · #7 (**permalink**) 26/04/2010, 09:49

position: absolute;
left: 50%;
top: 50%;
width: 700px;
height: 600px;
margin: 0 auto;

crack16 · #8 (**permalink**) 26/04/2010, 10:26

...no es q dudando..pero no se si me habran entendido

lo q quiero es centrar mi div vertical y horizontalmente en medio de la pagina

abimaelrc · #9 (**permalink**) 26/04/2010, 10:30

Verifica en esta página tiene muchos ejemplo de como lograr lo que estás pidiendo http://araudi.net/

Impostor · #10 (**permalink**) 26/04/2010, 10:31

Buenas, para centrar horizontalmente haz como ye han comentado, margin: 0 auto; para centrar vertical añade position: relative; y top:50%; . El 50% lo deberás variar (disminuyéndolo) hasta que te quede correctamente centrado.

Saludos¡¡

crack16 · #11 (**permalink**) 26/04/2010, 11:02

enserio muchas gracias x todo . pero no llego a centrar mi div de 700 x 600 px..

Estoy tratando desde ayer. he visto varios tutos. pero no lo llega a salir.. espero que alguien me pueda ayudar-

gracias

Impostor · #12 (**permalink**) 26/04/2010, 11:15

Si no nos muestras el código que tienes hasta ahora y en lo que falla, en poco te podemos ayudar.

Saludos¡¡

abimaelrc · #13 (**permalink**) 26/04/2010, 14:24

Habrá visitado el enlace que le dí. Allí hay 4 ejemplos de como centrar verticalmente y horizontalmente. O estará esperando que le hagamos el trabajo

crack16 · #14 (**permalink**) 26/04/2010, 16:04

Si lo vi amigo... y gracias x esa web sacare varios ejemplos

bueno llegue a resolverlo con un amigo

y esto fue lo que me dijo que ponga

Código CSS:

Ver original* {
    margin: 0px;
    padding: 0px;
}
#principal {
position:absolute;
width:700px;
height:600px;
margin:-300px 0 0 -350px;
left:50&#37;;
top:50%;
display:block;
}

pero yo queria que me expliquen esos estilos para yo poder hacerlo solo

gracias

PD: aca esta el code del index

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/swfobject.js"></script>
 
<title>BEBEK PERÚ. El Papel del Bebé en la alimentación</title>
<meta name="google-site-verification" content="ZsxomNCYbYYk_sL4ZRDDMRLEgYBCdVHB_LuurxjWtWw" />
<link href="css/stilo.css" rel="stylesheet" type="text/css" />
 
</head>
 
<body>
<div id="principal">
 
</div>
 
<script type="text/javascript">
 
   var so = new SWFObject("swf/index_contru.swf", "index_contru", "700", "600", "9");
 
   so.write("principal");
   </script>
 
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-16071892-1");
pageTracker._trackPageview();
} catch(err) {}</script>
 
</body>
</html>

abimaelrc · #15 (**permalink**) 26/04/2010, 16:17

Lee este manual http://librosweb.es/css/index.html

jomaruro · #16 (**permalink**) 27/04/2010, 02:35

Hola:

Aquí tienes otro ejemplo: http://www.csslab.cl/2007/01/12/cent...tical-con-css/

Saludos.