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

Código de CSS - Centrar un div

Imágen de perfil

Centrar un divgráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(12)
Publicado el 27 de Octubre del 2007 por Administrador
130.746 visualizaciones desde el 27 de Octubre del 2007. Una media de 364 por semana
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.

Versión 1
estrellaestrellaestrellaestrellaestrella(12)

Publicado el 27 de Octubre del 2007gráfica de visualizaciones de la versión: Versión 1
130.747 visualizaciones desde el 27 de Octubre del 2007. Una media de 364 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN"> <!--http://www.lawebdelprogramador.com--> <html> <body> <head> <title>div centrado verticalmente y horizontalmente</title> <style type="text/css"> .centrar { position: absolute; /*nos posicionamos en el centro del navegador*/ top:50%; left:50%; /*determinamos una anchura*/ width:400px; /*indicamos que el margen izquierdo, es la mitad de la anchura*/ margin-left:-200px; /*determinamos una altura*/ height:300px; /*indicamos que el margen superior, es la mitad de la altura*/ margin-top:-150px; border:1px solid #808080; padding:5px; } </style> </head> <body> <h1>div centrado verticalmente y horizontalmente</h1> <div class='centrar'> div centrado </div> </body> </html>

Comentarios sobre la versión: Versión 1 (12)

24/11/2007Cristina
estrellaestrellaestrellaestrellaestrella
Muchísimas gracias :)
29/07/2008jonna
estrellaestrellaestrellaestrellaestrella
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/2009Jonatan
estrellaestrellaestrellaestrellaestrella
justo lo que andaba buscando... gracias por el ejemplo.
15/08/2009esteban
estrellaestrellaestrellaestrellaestrella
hay dos etiquetas <body> en el ejemplo, pero me sirvió el tuto, gracias!
05/04/2011prog1000
estrellaestrellaestrellaestrellaestrella
Tambien lo puedes conseguir asi:

body{width:780px;margin:0 auto;padding:0px;}
01/09/2011Gio
estrellaestrellaestrellaestrellaestrella
gracias, funciona de maravilla!!
22/11/2011rowilson
estrellaestrellaestrellaestrellaestrella
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/2012Ckarl
estrellaestrellaestrellaestrellaestrella
Muy bueno!
21/02/2012Pablo
estrellaestrellaestrellaestrellaestrella
Muy bueno!!! me re sirbio
29/08/2012martin
estrellaestrellaestrellaestrellaestrella
thanx karen
08/08/2014Richard Sumavila
estrellaestrellaestrellaestrellaestrella
Excelente!!!
09/09/2014Karoline
estrellaestrellaestrellaestrellaestrella
Gracias, había olvidado como hacerlo y me salio a la perfección.

Comentar la versión: Versión 1

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