css - 如何在 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>

截至目前，视频会调整大小并在 600 像素高度后保持截断。但它与顶部对齐，而不是垂直居中。

Answer 1

看看这个 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: