響應中心使用CSS，引導的圖像

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任意pointer-events:none。

Answer 2

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

這應該做到這一點。