使用css,bootstrap响应中心图像

时间:2017-02-12 23:09:48

标签: html css twitter-bootstrap

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

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

2 个答案:

答案 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填充容器。