Como imagen verticalmente central dentro div

Question

tengo un margen de beneficio de esta manera:

<div> 
    <img /> 
</div> 

El div es superior img:

div { 
    height: 100px; 
} 

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

necesito la imagen para estar en el medio de la div (tenga la misma cantidad de espacio en blanco arriba y abajo).

He intentado esto y no funciona:

div { 
    vertical-align: middle; 
} 

Answer 1

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

background-position: center center; 

Si no es decorativo y constituye una valiosa información a continuación, la etiqueta img se justifica. Lo que hay que hacer en estos casos es el estilo de la div que contiene las siguientes propiedades:

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

Read more about this technique here. Informó que no funciona en IE6/7 (funciona en IE8).

Answer 2

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

Si la imagen es de 50 px, luego

img { 
    margin-top: 25px; 
} 

Answer 3

¿Ha intentado fijar margen en el div? p.ej.

div { 
    padding: 25px, 0 
} 

para la parte superior e inferior. También puede ser capaz de utilizar un porcentaje:

div { 
    padding: 25%, 0 
} 

Answer 4

que he publicado acerca de la alineación vertical en modo multi-navegador (Vertically center multiple boxes with CSS)

Crear una tabla de una sola célula. Solo la tabla tiene alineación vertical entre navegadores

Answer 5

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

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

Extracto:

<div style="display: table; height: 400px; position: relative; overflow: hidden;"> 
    <div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;"> 
     <div style="position: relative; top: -50%"> 
     any text<br> 
     any height<br> 
     any content, for example generated from DB<br> 
     everything is vertically centered 
     </div> 
    </div> 
    </div> 

(de estilos en línea a modo ilustrativo)

Answer 6

<div style="background-color:#006600; width:300px; text-align:center; padding:50px 0px 50px 0px;"> 
<img src="imges/import.jpg" width="200" height="200"/> 
</div> 

Answer 7

Como yo también estoy siendo constantemente descolgado CSS cross-browser, me gustaría para ofrecer una solución JQuery aquí. Esto toma la altura del div padres de cada imagen, se divide por dos y establecerlo 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); 
}); 

Answer 8

Digamos que usted quiere poner la imagen (40px X 40px) en el centro (horizontal y vertical) de la clase div = "caja".Por lo que tiene el código HTML siguiente:

<div class="box"><img /></div> 

Lo que tienes que hacer es aplicar el CSS:

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

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

Answer 9

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

html:

<div class="container"><img></div> 

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; 
} 

Es la parte superior de mi cabeza. Pero he usado esto antes, debería funcionar. Funciona también para navegadores antiguos.

Answer 10

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

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

Answer 11

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. inline-block es necesario para que ambos objetos permanezcan en una línea.

<div> 
    <div class="placeholder"></div> 
    <img /> 
</div> 

CSS:

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

Answer 12

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; 

} 

<div> 
<img src="images/logo.png" /> 
</div> 

Answer 13

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; 
} 

Answer 14

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script> 
(function ($) { 

$.fn.verticalAlign = function() { 
    return this.each(function(i){ 
    var ah = $(this).height(); 
    var ph = $(this).parent().height(); 
    var mh = Math.ceil((ph-ah)/2); 
    $(this).css('margin-top', mh); 
    }); 
}; 
})(jQuery); 

$(document).ready(function(e) { 


$('.in').verticalAlign(); 


}); 

</script> 

<style type="text/css"> 
body { margin:0; padding:0;} 
.divWrap { width:100%;} 
.out { width:500px; height:500px; background:#000; text-align:center; padding:1px; } 
.in { width:100px; height:100px; background:#CCC; margin:0 auto; } 
</style> 
</head> 

<body> 
<div class="divWrap"> 
<div class="out"> 
<div class="in"> 
</div> 
</div> 
</div> 

</body> 
</html>