Publicado en CSS, Tutoriales

Un buen ejemplo para centrar un DIV con CSS

Este un buen ejemplo para centrar un DIV con codigo CSS.

Esta probado para IE7, Firefox 2, Opera 9 y Safari 3

<style>
.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>

<div class=’centrar’>
div centrado
</div>

Fuente: www.lawebdelprogramador.com

3 comentarios sobre “Un buen ejemplo para centrar un DIV con CSS

  1. Excelente ejemplo… funciona a la perfección en todos los navegadores, algo dificil en estos tiempos… maldita compatibilidad!
    Gracias, saludos.

  2. Hola, probe este codigo pero no me resulta, tengo que cambiar el margin top para que en IE7 se vea bien pero no se ve bien en Firefox, alguna idea ?

    .centrar
    {
    position: absolute;
    /*nos posicionamos en el centro del navegador*/
    top:50%;
    left:50%;
    /*determinamos una anchura*/
    width:867px;
    /*indicamos que el margen izquierdo, es la mitad de la anchura*/
    margin-left:-434px;
    /*determinamos una altura*/
    height:750px;
    /*indicamos que el margen superior, es la mitad de la altura*/
    margin-top:-273px;
    }

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s