с flexbox это легко:

скрипка

просто добавьте следующее в контейнер изображения:

.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 */
}

используйте этот css, так как у вас уже есть разметка для него:

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

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

вот рабочий JsBin:http://jsbin.com/ihilUnI/1/edit

это решение работает только для квадратных изображений (потому что процентное значение margin-top зависит от ширины контейнера, а не от высоты). Для изображений произвольного размера вы можете сделать следующее:

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

решение рабочая JsBin: http://jsbin.com/ihilUnI/2/edit

вы можете центрировать изображение, как по горизонтали, так и по вертикали, используя margin: auto и абсолютное позиционирование. Также:

1. можно отбросить дополнительную разметку с помощью псевдо-элементов.
2. можно отобразить среднюю часть больших изображений с помощью отрицательных значений слева, сверху, справа и снизу.

.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>

попробуйте это

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

я наткнулся на эту тему в поисках решения, которое:

• использует 100% ширины данного изображения
• сохраняет соотношение сторон изображения
• сохраняет изображение вертикально выровненным по середине
• работает в браузерах, которые не полностью поддерживают шлейф

тестирование некоторые из решений, опубликованных выше, я не нашел ни одного, чтобы соответствовать всем этим критериям, поэтому я собрал этот простой, который может быть полезен для других людей, которым нужно сделать то же самое:

.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>

рабочий пример на JSFiddle

попробовать

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

вот метод, который позволяет центрировать любой контент как по вертикали, так и по горизонтали!

в принципе, вам просто нужно два контейнера и убедитесь, что элементы должны отвечать следующим критериям.

контейнер outher:

• должно быть display: table;

внутренний контейнер :

• должно быть display: table-cell;
• должно быть vertical-align: middle;
• должны были text-align: center;

поле содержание :

• должно быть display: inline-block;

если вы используете этот метод, просто добавьте свое изображение (вместе с любым другим контентом, который вы хотите использовать) в поле содержимого.

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>

см. также эта скрипка!

HTML-код

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

css код

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

сделайте еще один div и добавьте как "манекен", так и "img-контейнер" внутри div

сделать HTML и CSS, как следует

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>

вместо 100% для "отзывчивого контейнера" вы можете дать высоту, которую вы хотите.,