Cómo centrar verticalmente la imagen dentro de div

Tengo un marcado como este:

El div es más alto que img:

 div { height: 100px; } img { height: dynamic-value-smaller-than-100px; } 

Necesito que la imagen esté en el medio del div (tiene la misma cantidad de espacio en blanco arriba y abajo).

Intenté esto y no funciona:

 div { vertical-align: middle; } 

si su imagen es puramente decorativa, entonces podría ser una solución más semántica usarla como imagen de fondo. A continuación, puede especificar la posición del fondo

 background-position: center center; 

Si no es decorativo y constituye información valiosa, entonces la etiqueta img está justificada. Lo que debe hacer en ese caso es style the containing div con las siguientes propiedades:

 div{ display: table-cell; vertical-align: middle } 

Lea más sobre esta técnica aquí . Informó que no funciona en IE6 / 7 (funciona en IE8).

Otra forma es establecer la altura de la línea en el contenedor div y alinear su imagen con la vertical-align: middle.

html:

 

css:

 .container { width: 200px; /* or whatever you want */ height: 200px; /* or whatever you want */ line-height: 200px; /* or whatever you want, should match height */ text-align: center; } .container > img { vertical-align: middle; } 

Está fuera de mi cabeza. Pero he usado esto antes, debería funcionar. Funciona también para navegadores antiguos.

Digamos que quiere poner la imagen (40px X 40px) en el centro (horizontal y vertical) de la clase div = “box”. Entonces tienes el siguiente html:

 

Lo que tienes que hacer es aplicar el CSS:

 .box img { position: absolute; top: 50%; margin-top: -20px; left: 50%; margin-left: -20px; } 

Tu div incluso puede cambiar su tamaño, la imagen siempre estará en el centro de ella.

Esta es una solución que he usado antes para lograr el centrado vertical en CSS. Esto funciona en todos los navegadores modernos.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Extracto:

  
any text
any height
any content, for example generated from DB
everything is vertically centered

(Estilos en línea con fines de demostración)

Otra opción es establecer la display:block en la img y luego establecer el margin: 0px auto;

 img{ display: block; margin: 0px auto; } 

Como a mí también me decepcionan constantemente los CSS entre navegadores, me gustaría ofrecer una solución de JQuery aquí. Esto toma la altura del div principal de cada imagen, lo divide por dos y lo establece como un margen superior entre la imagen y el div:

 $('div img').each(function() { m = Math.floor(($(this).parent('div').height() - $(this).height())/2); mp = m+"px"; $(this).css("margin-top",mp); }); 

imagen para estar en el medio de la div

 div img{ bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; height:50px; width:50px; } 

He publicado acerca de la alineación vertical en forma de navegador cruzado ( centro verticalmente múltiples cuadros con CSS )

Crear una tabla de una sola celda. Solo la tabla tiene alineación vertical entre navegadores

 div { width:200px; height:150px; display:-moz-box; -moz-box-pack:center; -moz-box-align:center; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; display:box; box-pack:center; box-align:center; } 

En su ejemplo, la altura del div es estática y la altura de la imagen es estática. Dale a la imagen un valor de margin-top de ( div_height - image_height ) / 2

Si la imagen es 50px, entonces

 img { margin-top: 25px; } 

¿Has intentado establecer un margen en el div? p.ej

 div { padding: 25px, 0 } 

para arriba y abajo. También puede usar un porcentaje:

 div { padding: 25%, 0 } 
 

La respuesta aceptada no funcionó para mí. vertical-align necesita un socio para que puedan alinearse en sus centros. Así que creé un div vacío con la altura completa del div principal pero sin ancho para que la imagen se alinee. se necesita un inline-block para que ambos objetos permanezcan en una línea.

 

CSS:

 .class { height: 100%; width: 0%; vertical-align: middle; display: inline-block } img { display: inline-block; vertical-align: middle; } 
     Untitled Document