Html Css背景视频

有人知道如何将此视频背景居中吗

我试过：

margin: 0 auto;
text-align: center;

到目前为止，这些都不起作用

这是我的密码

Html:

如何将此视频背景居中，以便在调整窗口大小时，其左/右侧的删除量相同？谢谢你的帮助

---

这是我的JSFIDLE:

因为您使用的是

HTML5

元素，所以将内容集中在一个相对容器中，然后让CSS像这样处理其余内容：

<div id="Container">
    <video></video>
    <div></div>
</div>

body, html {
    height: 100%;
}

#Container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#Container video {
    position: absolute;
    left: 50%;
    top: 50%;
    /* The following will size the video to fit the full container. Not necessary, just nice.*/
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}

#Container div {
    position: relative;
    z-index: 1;
}

正文，html{
身高：100%；
}
#容器{
宽度：100%；
身高：100%；
位置：相对位置；
溢出：隐藏；
}
#集装箱视频{
位置：绝对位置；
左：50%；
最高：50%；
/*下面将调整视频大小以适合整个容器。不需要，只是很好*/
最小宽度：100%；
最小高度：100%；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
z指数：0；
}
#货柜组{
位置：相对位置；
z指数：1；
}

当然，您可以用任何要居中的元素替换

。因为您使用的是

video

元素，所以我忽略了较旧的浏览器，因为我想他们无论如何都不会喜欢您的页面。您也不必使用

min-

值，它只需居中即可

在中，您可以在不使用容器的情况下操纵和执行此操作

video.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.name类{
背景：url（../images/tv temp.png）不重复；
背景位置：中心；
高度：686px；
位置：固定；
顶部：100px；
右：0；
底部：0；
左：0；
溢出：隐藏；
z指数：-100；
}
.name类视频{
身高：473px；
位置：绝对位置；
顶部：148px；
左：3px；
宽度：100%；
}

使用

对象匹配的工作示例：封面更多信息请点击此处


*{
框大小：边框框；
}
身体{
保证金：0；
填充：0；
}
.videobg{
高度：100vh；
溢出：隐藏；
位置：相对；/*需要正确定位视频*/
}
录像带{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：-1；
对象适合度：cover；/*与“绝对”结合使用，与背景大小类似，但适用于DOM元素*/
}

您必须将您的
主体、html
高度设置为
100%
，或者为容器提供固定高度（例如
400px
）；否则，
#容器的高度将为0，使
顶部为0的一半。。。也就是0。然后它将其移动到translate中的
-50%
。我修改了我的帖子。@tomer只想提一下，因为我刚刚读了这篇文章，所以我唯一的改变就是使用
calc
：
top:0；左：0；顶部:钙(50%);；左：钙（50%）。不支持
calc
（IE8及更低版本）的旧浏览器也不支持
transform
，因此只显示元素而不移动它（它的裁剪方式不同，但这是一个很好的回退）。这对
视频
元素没有任何区别，因为IE8无论如何都不支持它们，但如果你将图像居中，这是一种确保兼容性的简单方法。虽然这段代码可能会回答这个问题，但提供有关如何以及为什么解决问题的信息可以提高其长期价值
<div id="Container">
    <video></video>
    <div></div>
</div>

body, html {
    height: 100%;
}

#Container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#Container video {
    position: absolute;
    left: 50%;
    top: 50%;
    /* The following will size the video to fit the full container. Not necessary, just nice.*/
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}

#Container div {
    position: relative;
    z-index: 1;
}

video.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

   .name-class {
    background: url(../images/tv-temp.png) no-repeat;
    background-position: center;
    height: 686px;
    position: fixed;
    top: 100px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    }
    .name-class video {
    height: 473px;
    position: absolute;
    top: 148px;
    left: 3px;
    width: 100%;
    }
<div class="name-class">
<video controls playsinline="" loop="" autoplay="">
<source src="..\video-name.mp4" type="video/mp4" autostart="true">

</video>
</div>