如何在div中垂直居中视频？

Question

我试图将视频放在这个div中，无论它的高度是多少。优选地，该解决方案将不使用Javascript。

.video {
    width: 100%;
    height: 600px;
    overflow: hidden;
}

video#bgvid { 
    min-width: 100%;
    min-height: 100%;
    background: url(polina.jpg) no-repeat;
}

HTML

<div class="video">

<video autoplay loop poster="polina.jpg" id="bgvid">

<source src="assets/background.mp4" type="video/mp4">

</video>
</div>

截至目前，视频重新调整尺寸并在600px高度后保持切断状态。但它与顶部对齐，而不是垂直对齐。

Answer 1

CSS

.video {
    height: 600px;
    overflow: hidden;
    text-align:center; 
}

video#bgvid { 
    border: 1px solid black;
    width:200px;
    min-height: 100%;
    background: url(polina.jpg) no-repeat;
}

Answer 2

看一下 http://css-tricks.com/centering-in-the-unknown/

您将了解如何设置垂直居中。

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

这是

Working JSFiddle

视频更新

HTML

<div id="ex3_container">
   <video autoplay loop poster="polina.jpg" id="ex3_content">
     <source src="assets/background.mp4" type="video/mp4">
   </video>
</div>

CSS：

  #ex3_container { width: 100%;
                   height: 600px;
                   background-color:yellow; 
                   position:relative; }
  #ex3_content { left:50%; 
                 top:50%; 
                 transform:translate(-50%,-50%); 
                 -webkit-transform:translate(-50%,-50%); 
                  background-color:gray; 
                  position:absolute; 
                }

Demo: