Отзывчивое центрирование изображения с помощью css, bootstrap

Question

Я пытаюсь центрировать изображение, в котором есть контейнер видеоизображения. Я хотел бы, чтобы он был точно центрирован по вертикали и по горизонтали. В настоящий момент я могу только центрировать изображение по горизонтали, но не имея проблем с его центрированием по вертикали. Когда я делаю центр изображения, он не реагирует. Есть идеи?

Вот как это выглядит на моей области заголовка: http://imgur.com/a/N6vNg

HTML код:

<div class="header-container"> 

     <div class="video-container"> 
      <video preload="true" autoplay="autoplay" loop="loop" volume= "0"> 

      <source src="video/backgroundAnime.mp4" type="video/mp4"> 
      <source src="video/backgroundAnime.webm" type="video/webm"> 
      <source src="video/backgroundAnime.ogv" type="video/ogg">     
      </video> 

     </div> 

     <img src="img/albayda.png" class="img-responsive center-block"> 

    </div> 

код CSS:

.header-container{ 
     width: 100%; 
     height: 800px; 
     border-left: none; 
     border-right: none; 
     position: relative; 
     padding: 20px; 
    } 

    .video-container{ 
     position: absolute; 
     top: 0%; 
     left: 0%; 
     height: 100%; 
     width: 100%; 
     overflow: hidden; 
    } 

    video{ 
     position: absolute; 
     z-index: -1; 
     width: 100%; 
    } 

    .img-responsive{ 
     margin:0 auto; 
    } 

Answer 1

Вместо использования <img> тега вы можете использовать <div> с центрированным не повторяющимся фоном, а затем заставьте его заполнить контейнер position:absolue;left:0;right:0;top:0;bottom:0 и o ptional pointer-events:none.

Answer 2

.header-container img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Это должно быть сделано.