在视频标签内垂直居中视频

Question

如何使视频标签内的视频垂直居中？目前视频顶部齐平，底部被切断。我想做的是让视频的中间部分位于视频容器的中间。视频的高度会有所不同，因为它是响应式的，因此随着浏览器变小，视频也会变小。这是我的代码：

html

<div id="video-wrap">
    <video preload="auto" autoplay loop muted>
        <source type="video/mp4" src="video.mp4">
    </video>
</div>

css:

#video-wrap {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

Answer 1

这三行应该做：

video{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

如果有效请告诉我:)

vertically centering video inside a video tag