Question

我正在尝试将具有背景视频容器的图像居中。我希望它能完全垂直和水平居中。目前我只能水平居中图像，但却难以垂直居中。当我将图像居中时，它不会变得敏感。有任何想法吗？

这是我在标题区域的外观： 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;
     }

Answer 1

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

应该这样做。

Answer 2

您可以使用<img>中心非重复背景，而不是使用<div>标记，然后使用position:absolue;left:0;right:0;top:0;bottom:0和可选pointer-events:none填充容器。

使用css，bootstrap响应中心图像

2 个答案: