centrar div

[Most]

Hola, como puedo hacer para que la web se me centre en todas las resoluciones..??

por que estoy usando la etiqueta center, y aling: center; etc...

y nada no se me cuadra :S

aqui el codigo css por si se necesita ver:

Código CSS:

img.avatar{width: 50px; height: 50px;}
 
body {align:center;}
 
 
 
.enlace_imagen img {border:0}
 
.boton{
  background-image:url(iniciar-sesion.png);
  background-repeat:no-repeat;
  height:21px;
  width:102px;
  background-position:center;
}
 
#Layer-1 {
  position: absolute;
  left: +2px;
  top: +2038px;
  width: 1003px;
  height: 31px;
  z-index: 1;
  background:url(pie-de-paguina.png);
}
 
#Layer-2 {
  position: absolute;
  left: +831px;
  top: +226px;
  width: 160px;
  height: 216px;
  z-index: 2;
  background:url(categorias.png);
}
 
 
#Layer-3 {
  position: absolute;
  left: +11px;
  top: +905px;
  width: 788px;
  height: 222px;
  z-index: 3;
  background:url(contenido.png);
}
 
#Layer-4 {
  position: absolute;
  left: +11px;
  top: +1463px;
  width: 788px;
  height: 222px;
  z-index: 4;
  background:url(contenido.png);
}
 
/* You named this layer Forma 32 copia 5 */
#Layer-5 {
  position: absolute;
  left: +11px;
  top: +1747px;
  width: 788px;
  height: 222px;
  z-index: 5;
  background:url(contenido.png);
}
 
/* You named this layer Forma 32 copia 3 */
#Layer-6 {
  position: absolute;
  left: +11px;
  top: +1183px;
  width: 788px;
  height: 222px;
  z-index: 6;
  background:url(contenido.png);
}
 
/* You named this layer Forma 32 */
#Layer-7 {
  position: absolute;
  left: +10px;
  top: +622px;
  width: 788px;
  height: 222px;
  z-index: 7;
  background:url(contenido.png);
}
 
/* You named this layer Forma 32 copia */
#Layer-8 {
  position: absolute;
  left: +11px;
  top: +225px;
  width: 788px;
  height: 222px;
  z-index: 8;
  background:url(contenido.png);
}
 
/* You named this layer Forma 34 */
#Layer-9 {
  position: absolute;
  left: +830px;
  top: +465px;
  width: 162px;
  height: 1547px;
  z-index: 9;
  background:url(publiidad.png);
}
 
/* You named this layer Tope Derecha */
#Layer-10 {
  position: absolute;
  left: +1004px;
  top: +0px;
  width: 2px;
  height: 2069px;
  z-index: 10;
  background:url(tope.png);
}
 
/* You named this layer Tope Izquierda */
#Layer-11 {
  position: absolute;
  left: +0px;
  top: -1px;
  width: 2px;
  height: 2070px;
  z-index: 11;
  background:url(tope.png);
  
}
 
/* You named this layer Pestaa */
#Layer-12 {
  position: absolute;
  left: +2px;
  top: +0px;
  width: 1002px;
  height: 169px;
  z-index: 12;
  background:url(encabezado.png);
}
 
/* You named this layer Panel  de  Usuario */
#Layer-13 {
  position: absolute;
  left: 746px;
  top: 50px;
  width: 130px;
  height: 11px;
  z-index: 13;
  background:url(panel-usuario-texto.png);
}
 
/* You named this layer El  seridor  de  esta  web  no */
#Layer-14 {
    position: absolute;
    left: 289px;
    top: 16px;
    width: 435px;
    height: 15px;
    z-index: 14;
    background:url(pie-texto.png);
}
 
/* You named this layer Los  Ultimos  Estrenos */
#Layer-15 {
  position: absolute;
  left: 325px;
  top: 12px;
  width: 152px;
  height: 11px;
  z-index: 15;
  background:url(estrenos.png);
}
 
/* You named this layer Musica */
#Layer-16 {
  position: absolute;
  left: 315px;
  top: 13px;
  width: 162px;
  height: 12px;
  z-index: 16;
  background:url(musica-texto.png);
}
 
/* You named this layer Software */
#Layer-17 {
  position: absolute;
  left: 292px;
  top: 13px;
  width: 205px;
  height: 16px;
  z-index: 17;
  background:url(programas-texto.png)
}
 
/* You named this layer Juegos */
#Layer-18 {
  position: absolute;
  left: 307px;
  top: 13px;
  width: 181px;
  height: 16px;
  z-index: 18;
  background:url(juegos-texto.png);
}
 
/* You named this layer Series */
#Layer-19 {
  position: absolute;
  left: 261px;
  top: 13px;
  width: 266px;
  height: 14px;
  z-index: 19;
  background:url(series-texto.png);
}
 
/* You named this layer Peliculas */
#Layer-20 {
  position: absolute;
  left: 299px;
  top: 12px;
  width: 193px;
  height: 12px;
  z-index: 20;
  background:url(ultimas-peliculas.png);
}
 
/* You named this layer Categorias */
#Layer-21 {
  position: absolute;
  left: 42px;
  top: 16px;
  width: 76px;
  height: 15px;
  z-index: 21;
  background:url(categorias-texto.png);
}
 
/* You named this layer Publicidad */
#Layer-22 {
  position: absolute;
  left: 44px;
  top: 17px;
  width: 73px;
  height: 11px;
  z-index: 22;
  background:url(publidad-texto.png);
}
 
/* You named this layer todoenlacesorg */
#Layer-23 {
  position: absolute;
  left: 77px;
  top: 66px;
  width: 378px;
  height: 48px;
  z-index: 23;
  background:url(texto-encabeazdo-1.png);
}
 
/* You named this layer PELICULAS  -  SERIES  -  JUEGOS */
#Layer-24 {
  position: absolute;
  left: 90px;
  top: 103px;
  width: 338px;
  height: 10px;
  z-index: 24;
  background:url(texto-encabezado-2.png);
}
 
#Layer-25 {
background:url("publicidad-contenido.png") repeat scroll 0 0 transparent;
height:90px;
left:26px;
padding:8px 14px 9px;
position:absolute;
text-align:center;
top:491px;
width:729px;
z-index:13;
}
 
#Layer-26 {
    position: absolute;
    left: +664px;
    top: +44px;
    width: 294px;
    height: 118px;
    z-index: 1;
    background:url(panel-usuario.png);
    text-align: center;
}
 
#Layer-27 {
    position: absolute;
    left: +664px;
    top: +44px;
    width: 294px;
    height: 118px;
    z-index: 1;
    background:url(panel-usuario-login.png);
    text-align: center;
}
 
/* Here are some examples of how you might want to change the
 * look and behavior of the links on your page.  Some examples for
 * further customization are included in comments.  */
a {
  cursor: pointer;
  outline: none;
}
a:link { color: #F88; }
a:visited { color: #F88; }
a:hover {
  color: #F00;
  /* text-decoration: underline; */
  /* font-weight: bold; */
}
 
#Layer-12 #Layer-26 table tr th table tr th {
    text-align: left;
}
 

he usado esto pero solo se me centra en XXXX x XXXX resolucion, si pongo la resolucion mas pequeña se me descuadra...:

Código CSS:

.box1 {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left:0;
    right:90px;
    width:80px;
 
}
 

[alexk]

con un correcto <doctype! y un contenedor con un ancho establecido y margin:0 auto; te vale para centrar una capa.

con esto centraras horizontalmente este elemento segun su contenedor.
aun que no lo veo necesario sacarlo del flujo del documento tan solo para centrar. pero bueno en ocaciones es necesario dependiendo de lo que necesites (que tu subras supongo)

Código:

.box1 {
    position: absolute;
    margin-left: -40px;
    margin-right: auto;
    left:50%;
    right:90px;
    width:80px;
}

PD: Usa el buscador que se ah tratado una infinidad de veces para centrar un elemento o varios en cualquier direccion

[Most]

gracias voy a provarlo, y sobre el buscador, llevo como 2h buscando, no me gusta postear sin antes buscar.

[Most]

Bueno, ya lo he puesto, asi me ha quedado:

[alexk]

si te fijas en el primer ejemplo que te puse...
el elemento que quieras centrar de su width le restas el 50% con margin-left entiendes? o sea
width:80px; (con left:50%;) = margin-left: -40px;
por que "margin:0 auto;" no te vale? por que ya tienes algunos post y esa screen ya me hiso recordar... que tienes todos tus elmentos fuera de flujo "position:absolute" lo que me parece incorrecto sino me equivoco son los "#Layer" del DW...

y sobre el buscador, llevo como 2h buscando

Te aseguro que no eres el primero ni el ultimo que ah preguntado como centrar un elemento/contenedor...

Como consejo te digo que leas
http://www.forosdelweb.com/f53/aport...ml-css-648073/
http://www.forosdelweb.com/f53/aport...rte-ii-657814/
y
http://librosweb.es/
y que comienzes de nuevo a maquetar tu proyecto para que no tengas problemas y cualquier duda que tengas te ayudamos

[Most]

Ok, gracias, empezare a maquetarla de nuevo, ya que como dices es por el position: absolute;

por que cuando lo borro, se me desordena todo...

[alexk]

Iniciado por Most

Ok, gracias, empezare a maquetarla de nuevo, ya que como dices es por el position: absolute;
por que cuando lo borro, se me desordena todo...

Sip la verda es la mejor opcion

[GastonManatico]

hace un div contenedor

[Most]

Iniciado por GastonManatico

hace un div contenedor

ya lo he echo, pero si pongo 1 medidas, con la resolucion 1280×768 se ve bien, y si la cambio a 1024×768 se ve descentrada...

[charlescuella]

deje yo te lo arreglo dame tiempo jejej :)

[Most]

............