你如何使用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

以下是将视频居中的 3 种方法：

1. 使用保证金

video {
  display: block;
  margin: auto;
}

2. 使用变换

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

3. 使用容器和弹性盒

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

Answer 3

我知道这个话题太长了，但是现在开始：

这是页面的中心

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

这是该行的中间部分

video {
  display: block;
  margin: auto;
}

只为那些正在寻找这个的人

Answer 4

要水平居中视频添加：

display: block;
margin: 0 auto;