Responsive Zentrierung eines Bildes mit CSS, Bootstrap - HTML, CSS, Twitter-Bootstrap

Ich versuche ein Bild zu zentrieren, das eineHintergrundvideo-Container. Ich möchte, dass es vertikal und horizontal exakt zentriert ist. Im Moment kann ich das Bild nur horizontal zentrieren, aber es ist schwierig, es vertikal zu zentrieren. Wenn ich das Bild zentriere, wird es nicht reaktionsfähig. Irgendwelche Ideen?

So sieht es in meinem Kopfbereich aus: http://imgur.com/a/N6vNg

HTML Quelltext:

<div class="header-container">

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

<source src="/images/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="/images/img/albayda.png" class="img-responsive center-block">

</div>

CSS-Code:

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

Antworten:

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

Das sollte es tun.

Anstatt zu verwenden <img> Tag, den Sie verwenden können a <div> mit zentriertem, sich nicht wiederholendem Hintergrund und dann füllen Sie den Container mit position:absolue;left:0;right:0;top:0;bottom:0 und optional pointer-events:none.