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?