CSS centrar una imagen o un div horizontal y verticalmente

por | Sep 4, 2009 | CSS, Diseño | 6 Comentarios

Siempre suele ser un dolor de cabeza centrar un DIV especialmente centrarlo verticalmente, en un post anterior expliqué como centrar los contenidos dentro de un DIV, veamos ahora como centrar el DIV.

Imaginemos que tenemos un DIV que mide 300px x 300px al cual para centrarlo le aplicaremos la clase center

1
<div id="midiv" class="center"></div>

Nuestro código CSS sería

1
2
3
4
5
6
7
8
9
10
11
.center {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -150px;
   margin-top: -150px;
}
#midiv {
   width: 300px;
   height: 300px;
}

El truco es simple debemos establecer como márgenes la mitad del ancho y del alto de nuestro DIV o imagen que deseamos centrar

6 Comentarios

  1. usuario
    usuario el octubre 9, 2009 a las 1:35 am

    Excelente truco, muy útil. Gracias!!

  2. usuario
    usuario el noviembre 8, 2011 a las 9:49 am

    Y si el div a centrar no tiene un tamaño fijo, sino dependiente de su contenido?

  3. usuario
    usuario el febrero 29, 2012 a las 10:04 pm

    excelente post, lo mejor para centrar

  4. usuario
    usuario el abril 26, 2012 a las 4:13 pm

    Hola gracias:

    Una variante para centrar imagenes en DIV anidados:

    CSS:
    ————
    .creditos {
    width:100%;
    text-align: center;
    vertical-align: middle;
    color:#000;
    font-family: ‘Open Sans’, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 1.5;
    background-color: #6fa1c2;
    }
    .iconos { float:left; align:center; width:100%; display:inline;}

    a#redes-sociales-twitter {
    display:block;
    width:25px;
    height:25px;
    text-indent:-9999px;
    outline:none;
    background:url(images/redes-sociales-twitter-spr.png);
    }
    a#redes-sociales-twitter:link { background-position: top left; }
    a#redes-sociales-twitter:hover { background-position: top right; }
    a#redes-sociales-twitter:active { background-position: bottom left; }
    a#redes-sociales-twitter:visited { background-position: bottom right; }

    .centrado {
    position: relative;odos los
    max-width:100px; /* la suma del ancho de todos los iconos + espaciado inter-icono */
    /* 47%(aproximado), 50% menos la suma del ancho de todos los iconos */
    left: 47%;
    }

    HTML:
    ———–

    Mis creditos de la pagina web, direccion, etc
    Todos los derechos reservados (c) 2012.



    Saludos

  5. usuario
    usuario el febrero 4, 2013 a las 11:16 pm

    Excelente aporte. La verdad estoy muy agradecido ya que me ha servido de mucho.
    Gracias por la información de tanto valor. acontinuar asi!
    Saludos. Luis

  6. Mateo Lopera
    Mateo Lopera el febrero 21, 2016 a las 8:10 pm

    Este video me sirvio mucho para centrar el Logo, tambien hay un video para centrar el top menu, les dejo el link.
    https://youtu.be/oYI_eJ2U2Kk

Trackbacks/Pingbacks

  1. usuario - [...] CSS Centrar vertical y horizontalmente Publicado el 28 julio, 2011 por Kerol var addthis_product = 'wpp-261'; var addthis_config =…