Crear capa Centrada Horizontal y Verticalmente

JuJoGuAl · #1 (**permalink**) 22/08/2011, 15:17

Buenas tardes ya tengo posteado un tema donde necesito saber como crear una capa que quede Vertical y Horizontalmente centrada, el problema de esta capa es que su tamano es dinamica, es decir tanto el alto como el ancho puede incrementar...

asi que como la ubico de forma centrada en la pagina??

yo coloque un espacio minimo para el alto y el ancho, pero no se como hacer que qude centrada, como hago??

Muestro el Codigo que tengo:

Código CSS:

Ver original#cuerpoadmin
{
    display:block;
    position:absolute;
    margin: 0 auto;
    width:auto;
    height:auto;
    min-height:300px;
    min-width:736px;
    padding:1px;
    border:1px solid #F4CF08;
    background-color:#ffffff;
    z-index:10;
    overflow:auto;
    text-align:center;
}

Ayuda Por Favor...

emiliodeg · #2 (**permalink**) 23/08/2011, 00:18

bueno si mal no recuerdo era asi, hay q darle alto y ancho al html y al body

Código CSS:

Ver originalhtml,body{width:100%;height:100%}
body{position:relative}
#cuerpoadmin{position:absolute;top:50%;left:50%;width:500px;height:300px;margin-top:-150px;margin-left:-250px}

tips:
body: en relativo
caja, en absoluto, con ancho y alto y top/left al 50% y luego le restas margen de la mitad del alto y ancho

espero te sirva

IsaBelM · #3 (**permalink**) 23/08/2011, 07:24

se me ocurre que al no saber ni el alto ni el ancho que puede ocupar, hay que usar propiedades de tablas

Cita:

<!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 content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}

#contenedor {
margin: 0;
width: 100%;
height: 100%;
display: table;
}

#alineacion {
text-align: center;
display: table-cell;
vertical-align: middle;
}

#texto {
margin: 0 auto;
max-width: 300px;
max-height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="alineacion">
<div id="texto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
</div>
</div>
</div>
</body>
</html>

JuJoGuAl · #4 (**permalink**) 23/08/2011, 08:25

Cita:

Iniciado por emiliodeg

bueno si mal no recuerdo era asi, hay q darle alto y ancho al html y al body

Código CSS:

Ver originalhtml,body{width:100%;height:100%}
body{position:relative}
#cuerpoadmin{position:absolute;top:50%;left:50%;width:500px;height:300px;margin-top:-150px;margin-left:-250px}

tips:
body: en relativo
caja, en absoluto, con ancho y alto y top/left al 50% y luego le restas margen de la mitad del alto y ancho

espero te sirva

Es que con tu opcion tengo que limitar el alto y ancho cosa que no quiero, como te dije es un div dinamico, me tengo que limitar a usar porcentajes y tus valores son pixeles

Cita:

Iniciado por IsaBelM

se me ocurre que al no saber ni el alto ni el ancho que puede ocupar, hay que usar propiedades de tablas

Bueno este codigo lo voy a probar haber que me sale de aqui, soy muy nuevo con las divs y e leido muchisimo y veo que el problema no es el centrado horizontal si no el vertical es un poco complejo de hacerlo y al ver los problemas de interpretacion que tienen los navegadores hace el trabajo mas arduo...

emiliodeg · #5 (**permalink**) 23/08/2011, 11:24

bueno con tablas tambien es una buena opción, aunque no sea la correcta semanticmaente hablando
y sino un poquito de javascript y listo ;)

IsaBelM · #6 (**permalink**) 23/08/2011, 12:35

Cita:

Iniciado por emiliodeg

bueno con tablas tambien es una buena opción, aunque no sea la correcta semanticmaente hablando
y sino un poquito de javascript y listo ;)

tablas?? quien ha usado tablas??

javascript?? es que no queda demostrado que se puede hacer con css??

entes de postear lee bien por que ya es la segunda vez que metes la pata en este tema

JuJoGuAl · #7 (**permalink**) 23/08/2011, 16:27

Bueno no quiero usar tablas la idea es hacerlo con css... estoy aplicando la idea de ISABELM asi que gracias por sus repuestas xD