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

Question

18

如何在video标签中垂直居中视频？目前视频的顶部和底部都被裁剪了。我想让视频的中间处于视频容器的中间位置。由于视频是响应式的，因此其高度会变化，随着浏览器变小，视频也会变小。以下是我的代码：

html

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

样式表语言：

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

- midknyte

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- m0bi5 · Accepted Answer

这三行代码应该就可以：

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

如果它有效，请告诉我 :)