Utilizamos cookies propias y de terceros para mejorar la experiencia de navegación, y ofrecer contenidos y publicidad de interés.
Al continuar con la navegación entendemos que se acepta nuestra política de cookies.
Iniciar sesión Cerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta

Centrar un div

Titulo:local

Centrar un div

Lenguaje:CSS
Código que muestra como centrar un div en el centro de la pantalla, tanto verticalmente como horizontalmente.
Probado en IE 5,6,7, Firefox 2 y Opera 9.

Comentarios (11)Votos positivos 110%Votos negativos -10%

24/11/2007Cristinaok
Muchísimas gracias :)
29/07/2008jonnaok
Al leer tu post me ha surgido una pregunta por que en este momento estoy realizando una web y he usado ese metodo para centrar mi página, y funciona perfecto pero:

tengo un menu desplegable que se me descuadra.
Esto antes no me ocurría con la orden text-align = "center" aunque con esta orden no se me centraba bien la página pero el desplegable quedaba en su sitio.

Es un menu desplegable gratuito que modifique en parte, a lo mejor tu sabes que he de retocar en él para que esto no pase. Esta es la hoja de estilos del menu desplegable:

/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
position:absolute;
overflow:hidden;
left:-1000px;
top:-1000px;
text-align: left;
}

/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
position:absolute;
}

/* (AQUI CAMPBIAMOS LA POSICION DEL DESPLEGABLE RESPECTO DE LA CAPA atencion al modificar la ubicacion de la capa lateralmente cambia el menu en altura???¿¿¿)this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
position:relative;
left:-23px; top:-8px;
border:NONE;
z-index:2;
}

.transMenu.top .items {
border-top:none;
}

/* (tipo, color y tamaño letras menu, font weight none para que no este en negrita)each TR.item is one menu item */
.transMenu .item {
color:WHITE;
background-image: none;
font-family: ISOCTEUR;
font-size: 11;
font-weight: NONE;
text-decoration:none;
/* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
border:none;
cursor:pointer;
cursor:hand;
}

/* (aqui cambiamos la transparencia del menu desplegable) this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
position:absolute;
left:0px;
top:0px;
z-index:1;
-moz-opacity:.0;
filter:alpha(opacity=0);
}

/* (aqui tenemos la transparencia de la linea vertical del borde del menu desplegable, cambiando moz opacity a 0 tenemos el menu sin borde)same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
position:absolute;
z-index:3;
top:3px; width:2px;
-moz-opacity:.0;
filter:alpha(opacity=0);
}

/* (aqui poniendo moz opacity a 0 hacemos totalmente transparente la linea horizontal del borde del menu desplegable) same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
position:absolute;
z-index:1;
left:3px; height:2px;
-moz-opacity:.0;
filter:alpha(opacity=0);
}

/* (color de fondo de las letras al pasar el cursor) this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.transMenu .item.hover {
background-image: none;
color:#8b8989;
}

/* (para quitar los pngs de los puntos,mas abajo para dar color a las letras)this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.transMenu .item img {
margin-left:-1010px;
}
.textoNoIdent {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: WHITE;
text-decoration: none;
}
.formError {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: WHITE;
border-top: 1px solid #C4CCCC;
border-right: 1px solid #ACB5B5;
border-bottom: 1px solid #6F7777;
border-left: 1px solid #ACB5B5;
padding: 2px 0 2px 0.25em;
background-color: #F5E984;
}
.txtError {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #990000;
background-color: #E9E9E9;
padding: 3px;
text-align: justify;
}
Como ves, trae explicaciones de como modificarlo, ya que lo saque de un página gratuita.

Te agrdeceria que me echaras un cable!!!!
12/05/2009Jonatanok
justo lo que andaba buscando... gracias por el ejemplo.
15/08/2009estebanok
hay dos etiquetas <body> en el ejemplo, pero me sirvió el tuto, gracias!
05/04/2011prog1000ok
Tambien lo puedes conseguir asi:

body{width:780px;margin:0 auto;padding:0px;}
01/09/2011Giook
gracias, funciona de maravilla!!
22/11/2011rowilsonok
falta agregar

body {
min-width:400px; /*ancho del div a centrado*/
min-height:300px; /*altura del div a centrado, así no se sale del espacio*/
}
10/01/2012Ckarlok
Muy bueno!
21/02/2012Pablook
Muy bueno!!! me re sirbio
29/08/2012martinok
thanx karen
08/08/2014Richard Sumavilaok
Excelente!!!

Comenta este código fuente

Nombre
Correo (no se visualiza en la web)
Valoración del curso ok ko
Comentarios