Tengo el siguiente código que configura un contenedor que tiene una altura que cambia con el ancho cuando se redimensiona el navegador (para mantener una relación de aspecto cuadrado).

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

¿Cómo puedo alinear verticalmente el IMG dentro del contenedor? Todas mis imágenes tienen alturas variables y el contenedor no puede tener una altura fija / altura de línea porque responde ... ¡Por favor, ayuda!

Aquí hay una técnica para alinear elementos en línea dentro de un padre , horizontal y verticalmente al mismo tiempo:

Alineamiento vertical

1) En este enfoque, creamos un inline-block(pseudo-) elemento como el primer (o último) hijo del padre , y configuramos su heightpropiedad 100%para tomar toda la altura de su padre .

2) Además, la suma vertical-align: middlemantiene los elementos en línea (bloque) en el medio del espacio de línea. Entonces, agregamos esa declaración CSS al primer hijo y a nuestro elemento (la imagen ) ambos.

3) Finalmente, para eliminar el carácter de espacio en blanco entre los elementos en línea (-block) , podríamos establecer el tamaño de fuente del padre en cero por font-size: 0;.

Nota: Utilicé la técnica de reemplazo de imagen de Nicolas Gallagher a continuación.

¿Cuales son los beneficios?

• El contenedor ( padre ) puede tener dimensiones dinámicas.

• No es necesario especificar las dimensiones del elemento de imagen explícitamente.

• Podemos usar fácilmente este enfoque para alinear un <div>elemento verticalmente también; que puede tener un contenido dinámico (alto y / o ancho). Pero tenga en cuenta que debe volver a configurar la font-sizepropiedad de divpara mostrar el texto interior. Demo en línea .

<div class="container">
    <div id="element"> ... </div>
</div>

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

La salida

Contenedor receptivo

Esta sección no responderá la pregunta ya que el OP ya sabe cómo crear un contenedor receptivo. Sin embargo, explicaré cómo funciona.

Para hacer que la altura de un elemento contenedor cambie con su ancho (respetando la relación de aspecto), podríamos usar un valor porcentual para la paddingpropiedad superior / inferior .

Un valor porcentual en el margen superior / inferior o en los márgenes es relativo al ancho del bloque contenedor.

Por ejemplo:

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Aquí está la demostración en línea . Comente las líneas desde la parte inferior y cambie el tamaño del panel para ver el efecto.

Además, podríamos aplicar la paddingpropiedad a un hijo ficticio o :before/ :afterpseudo-elemento para lograr el mismo resultado. Pero tenga en cuenta que en este caso, el valor de porcentaje en paddinges relativo al ancho de .responsive-containersí mismo.

<div class="responsive-container">
  <div class="dummy"></div>
</div>

.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

Demo # 1 .
Demo # 2 (Usando :afterpseudo-elemento)

Agregar el contenido

El uso de la padding-toppropiedad provoca un gran espacio en la parte superior o inferior del contenido, dentro del contenedor .

Con el fin de fijar de eso, tenemos envolver el contenido por un elemento de envoltura, eliminar ese elemento de flujo normal de documentos mediante el posicionamiento absoluto , y, finalmente, expandir la envoltura (bu usando top, right, bottomy leftpropiedades) para llenar todo el espacio de su matriz, El contenedor .

Aquí vamos:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Aquí está la demostración en línea .

Todos juntos

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>

.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Aquí está la demostración de trabajo .

Obviamente, podría evitar el uso de ::beforepseudoelementos para la compatibilidad del navegador y crear un elemento como primer hijo de .img-container:

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

DEMO ACTUALIZADA .

Usando max-*propiedades

Con el fin de mantener el interior la imagen de la caja de ancho menor, podría configurar max-heighty max-widthpropiedad en la imagen:

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

Aquí está la DEMO ACTUALIZADA .

Con flexbox esto es fácil:

VIOLÍN

Simplemente agregue lo siguiente al contenedor de imágenes:

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}

Use este CSS, ya que tiene el marcado para ello:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container > img {
  margin-top:-50%;
  margin-left:-50%;  
}

Aquí hay un JsBin en funcionamiento: http://jsbin.com/ihilUnI/1/edit

Esta solución solo funciona para imágenes cuadradas (porque un valor de margen superior de porcentaje depende del ancho del contenedor, no de la altura). Para imágenes de tamaño aleatorio, puede hacer lo siguiente:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}

Solución de trabajo de JsBin: http://jsbin.com/ihilUnI/2/edit

Puede centrar una imagen, tanto horizontal como verticalmente, utilizando margin: autoun posicionamiento absoluto. También:

1. Es posible deshacerse del marcado adicional utilizando pseudo elementos.
2. Es posible visualizar la porción media de imágenes GRANDES usando valores negativos izquierdo, superior, derecho e inferior.

.responsive-container {
  margin: 1em auto;
  min-width: 200px;       /* cap container min width */
  max-width: 500px;       /* cap container max width */
  position: relative;     
  overflow: hidden;       /* crop if image is larger than container */
  background-color: #CCC; 
}
.responsive-container:before {
  content: "";            /* using pseudo element for 1:1 ratio */
  display: block;
  padding-top: 100%;
}
.responsive-container img {
  position: absolute;
  top: -999px;            /* use sufficiently large number */
  bottom: -999px;
  left: -999px;
  right: -999px;
  margin: auto;           /* center horizontally and vertically */
}

<p>Note: images are center-cropped on &lt;400px screen width.
  <br>Open full page demo and resize browser.</p>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/400/sports/9/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/200/sports/8/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/400/sports/7/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/200/sports/6/">
</div>

Prueba este

  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }

¡Aquí hay una técnica que le permite centrar CUALQUIER contenido tanto vertical como horizontalmente!

Básicamente, solo necesita dos contenedores y asegúrese de que sus elementos cumplan con los siguientes criterios.

El otro contenedor:

• debería tener display: table;

El contenedor interior:

• debería tener display: table-cell;
• debería tener vertical-align: middle;
• debería tener text-align: center;

El cuadro de contenido:

• debería tener display: inline-block;

Si utiliza esta técnica, simplemente agregue su imagen (junto con cualquier otro contenido que desee utilizar) al cuadro de contenido.

Demo:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 12px;
    border : 1px solid #000;
}

img {
   max-width : 120px;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <img src="https://i.stack.imgur.com/mRsBv.png" />
     </div>
   </div>
</div>

Ver también este violín !

Encontré este hilo en busca de una solución que:

• usa el 100% del ancho de la imagen dada
• mantiene la relación de aspecto de la imagen
• mantiene la imagen alineada verticalmente al medio
• funciona en navegadores que no son totalmente compatibles con flex

Al probar algunas de las soluciones publicadas anteriormente, no encontré una que cumpla con todos estos criterios, por lo que armé esta simple que podría ser útil para otras personas que necesitan hacer lo mismo:

.container {
  width: 30%;
  float: left;
  border: 1px solid turquoise;
  margin-right: 3px;
  margin-top: 3px;
}

.container:last-of-kind {
  margin-right: 0px;
}

.image-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 70%;
  /* this is the desired aspect ratio */
  width: 100%;
}

.image-container img {
  position: absolute;
  /* the following 3 properties center the image on the vertical axis */
  top: 0;
  bottom: 0;
  margin: auto;
  /* uses image at 100% width (also meaning it's horizontally center) */
  width: 100%;
}

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

Ejemplo de trabajo en JSFiddle

Tratar

HTML

<div class="responsive-container">
     <div class="img-container">
         <IMG HERE>
     </div>
</div>

CSS

.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}

código HTML

<div class="image-container"> <img src=""/> </div>

código css

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }

Haga otro div y agregue 'dummy' y 'img-container' dentro del div

Hacer HTML y CSS como sigue

html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}

<div class="responsive-container">
    <div class="inner-container">
		<div class="dummy">Sample</div>
		<div class="img-container">
			Image tag
		</div>
	</div>	
</div>

En lugar del 100% para el 'contenedor receptivo', puede dar la altura que desee.