我正在尝试将具有背景视频容器的图像居中。我希望它能完全垂直和水平居中。目前我只能水平居中图像,但却难以垂直居中。当我将图像居中时,它不会变得敏感。有任何想法吗?
这是我在标题区域的外观: http://imgur.com/a/N6vNg
HTML code:
<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;
}
答案 0 :(得分:1)
.header-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
应该这样做。
答案 1 :(得分:0)
您可以使用<img>
中心非重复背景,而不是使用<div>
标记,然后使用position:absolue;left:0;right:0;top:0;bottom:0
和可选pointer-events:none
填充容器。