Centrado Dinámico de Columnas mediante CSS

Aquí va el ultimo tutorial de CSS que tenia guardado en mi remesa, es bien sencillito.

Os permitira situar un cuadro o objeto en el centro de la pagina, independientemente de la resolucion de pantalla del usuario.

Esto que es muy sencillo mediante tablas, curiosamente no lo es tanto con CSS, asi que creo que puede ser de utilidad... por cierto, usa posicionamiento absoluto, a ver si adivinais el truco antes de verlo ;-)

Hay que añadir "position:absolute;" sin eso no funciona bien.

Sencillo, por ejemplo si pones una caja centrada de 500 px:

La alineas con *posicionamiento absoluto* en el medio de la pantalla, usando "left:50%;" para ello, y luego de margin-left le restas la mitad del tamaño de la caja (250 px), así quedaria el codigo->

<style>

#centrado {
position: absolute;

  width: 500px;

  left: 50%;

  margin-left: -250px;

  border: solid 1px #999;

  text-align: left;
}

  </style>
<body>
<div id="centrado">

  Asi quedaria una caja de texto centrado usando este metodo

  </div>

  </body>

Autor: PHoTeK
http://www.ofdnews.com/comentarios?id=592_0_1_0_C

Usuarios que han visto este tema también han visto...

- Cómo solucionar problemas en CSS
- Página HMTL centrada horizontal y verticalmente con CSS
- Atributos y valores en css
- Elementos AFTER y BEFORE en CSS
- Mozilla: navegador centrado en el usuario

- Versión imprimible de este documento

- Enviar por e-mail este documento