你如何使用CSS集中视频

Question

我正在尝试将视频集中在我的网站中，但我不想在HTML中使用中心标记，因为它有点过时了。我如何用CSS做到这一点？如果有任何帮助，这是我的HTML代码。

<center>
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</center> 

Answer 1

以下是一个示例：http://jsfiddle.net/Cn7SU/

只需将这些CSS规则添加到元素video：

display: block;
margin: 0 auto;

添加display: block属性非常重要。否则你不能使元素居中。

Answer 2

要水平居中视频，请添加：

display: block;
margin: 0 auto;

Answer 3

我知道这个话题很长，但是可以继续：

这是页面的中心

video {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

这是一行的中间

video {
  display: block;
  margin: auto;
}

只是为了寻找这个人

Answer 4

试试这个，在你的视频标签周围有一个包装div。 html5视频和图像在样式设置时被视为文本。所以text-align：center会起作用。你可以查看下面的小提琴。

<div class="video">  
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>

Answer 5

以下三种方法可以使视频居中：

1。使用边距

video {
  display: block;
  margin: auto;
}

2。使用转换

video {
  margin-left: 50vw;
  transform: translate(-50%);
}

3。使用容器和flexbox

.container video {
  display: flex;
  justify-content: center;
}