CSS centrar una imagen o un div horizontal y verticalmente
Categories: CSS, Diseño - Tags: CSS, maquetaciónSiempre 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
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
Excelente truco, muy útil. Gracias!!
[...] CSS Centrar vertical y horizontalmente Publicado el 28 julio, 2011 por Kerol var addthis_product = 'wpp-261'; var addthis_config = {"data_track_clickback":true,"ui_language":"es"};http://www.miguelmanchego.com/2009/css-centrar-una-imagen-o-un-div-horizontal-y-verticalmente/ [...]
Y si el div a centrar no tiene un tamaño fijo, sino dependiente de su contenido?
excelente post, lo mejor para centrar
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
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