Centrar capa en horizontal y en vertical

Vamos a centrar una capa horizontal y verticalmente. Es un truco muy útil para cuando queramos situar, por ejemplo, el formulario de logueo de nuestra web y queremos que esté centrado totalmente en la página. Además, siempre aparecerá centrada según se redimensiona la ventana.

p { margin: 1em; } #mydiv { position:absolute; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: #f3f3f3; }

Y el código html sería:

<body> <div id="mydiv"> <p>Contenido del div</p> </div> </body>

Podeis ver un ejemplo y el código completo en:
http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm

Compártelo

También te puede interesar...

Cambiar el Css de un sitio dinamicamente
Problema con listas en ie6
Primera letra del parrafo mas grande y de otro color
Tutorial de iniciacion de CSS
Comentarios condicionales de Internet Explorer
Ayuda, Mi sitio se ve mal en firefox - XHTML+CSS
Evitar problemas con Internet explorer 8 emulando el 7
Gradiente lineal

Comentarios

gandy - 26/09/2008 08:15:31

Hola , muy buen aporte, solo sabia centrar horizontalmente, pero ahora ya se como hacerlo verticalmente. gracias.
gerardogt - 30/09/2008 15:55:34

en algun proyecto que hice para centrar divs dentro de una pagina, lo que hacia era crear un div mayor que contenia uno de dimenciones menores, el div menor tenia margenes quue lo hacia centrarse en horizontal y vertical, es como si adentro de una caja hubiera una cajita con brazos en sus 4 lados que empujaban igual y quedaba centrado, aunque esta se ve mas elegante
_SxR_ - 02/10/2008 04:43:07

Está bien, aunque para central horzizontalmente yo te recomiendo utilizar en el css:
- margin-left: auto;
con lo que se centrará sin poroblemas, lo que ya no se es si utilizar:
- margin-top: auto;
centrará la capa verticalmente, no lo he probado todavía. Siempre puedes probar:
- margin:auto;