Javascript 无法将加载程序置于视频中心

我有一个视频和一个用于缓冲的加载程序。我似乎不能把它居中。我尝试了无数在网上找到的方法，但似乎没有什么能让它成为中心

我在这里尝试了每一种方法：

我在这里尝试了各种方法：

我在这里尝试了各种方法：

不开玩笑，我不是在开玩笑。我什么都试过了

什么都没用

同样在手机上，蓝色加载器位于视频的底部，不居中，这意味着我不能使用边距，因为它需要为每个屏幕大小居中。尽管spinner类需要这个margin

margin:100px auto或加载程序不会显示

它需要有
位置：绝对

它还需要有
显示：无，因此在javascript调用它之前它是隐藏的。现在无论我做什么，我都会得到这个：



var video=document.getElementById（“video_1”）；
var placeholder=document.getElementById（“占位符_1”）；
占位符_1.style.top=视频_1.offsetTop+“px”；
占位符_1.style.left=视频_1.offsetLeft+“px”；
视频_1.onwaiting=函数（）{
showPlaceholder（占位符_1，this）；
};
视频播放=功能（）{
hidePlaceholder（占位符_1，this）；
};
功能显示占位符（img、vid）{
img.style.height=vid.scrollHeight+“px”；
img.style.width=vid.scrollWidth+“px”；
img.style.display=“块”；
}
功能hidePlaceholder（img、vid）{
img.style.display=“无”；
}
.spinner{
保证金：100像素自动；
宽度：50px；
高度：40px；
文本对齐：居中；
字体大小：10px；
}
.spinner>div{
背景色：#0080ff；
身高：100%；
宽度：5.5px；
显示：内联块；
-webkit动画：sk stretchdelay 1.2s无限轻松输入输出；
动画：sk stretchdelay 1.2s无限轻松输入输出；
}
.spinner.rect2{
-webkit动画延迟：-1.1s；
动画延迟：-1.1s；
}
.spinner.rect3{
-webkit动画延迟：-1.0s；
动画延迟：-1.0s；
}
.spinner.rect4{
-webkit动画延迟：-0.9秒；
动画延迟：-0.9秒；
}
.spinner.rect5{
-webkit动画延迟：-0.8s；
动画延迟：-0.8秒；
}
@-webkit关键帧sk stretchdelay{
0%,
40%,
100% {
-webkit转换：scaleY（0.4）
}
20% {
-webkit转换：scaleY（1.0）
}
}
@关键帧sk stretchdelay{
0%,
40%,
100% {
变换：scaleY（0.4）；
-webkit转换：scaleY（0.4）；
}
20% {
转换：scaleY（1.0）；
-webkit转换：scaleY（1.0）；
}
}
.THG占位符{
显示：无；
位置：绝对位置；
z指数：1；
}
.THG视频{
宽度：100%！重要；
高度：自动！重要；
最大高度：380px；
最大宽度：512px；
z指数：1；
}


如果您想在整个视频框（包括控件）中居中显示元素

使用第二个CSS：

我已使用Flexbox更新了@DanteTheSmith的fiddle解决方案

小提琴：

解释
有一个包装器div，其位置为：relative，因此绝对位置的元素将在该div的约束范围内。

视频为100%宽度，因此响应速度快。

包装器div使用
max width

占位符元素由js添加了
display:flex
。

它以Flexbox
对齐项目
和
对齐内容
为中心

高度使用
Calc
调整视频控件的高度-尽管这可能因浏览器而异（我使用的是Chrome）。如果你不太迂腐，你可以100%使用

Flexbox现在得到了很好的支持：
这不起作用。正如你看到的，我很难将这个加载程序集中到视频中。添加了一个提琴，可能会帮助你进一步调试。这是导致浏览器差异的原因吗？我使用的是最新的Chrome浏览器，但可能是其他浏览器在视频或视频本身中设置了不同的默认控制栏。好吧，新的编辑功能可以正常工作，尽管它没有居中。我想知道youtube是怎么做到的。。。我用的是铬。同时，改变这一利润率对移动和桌面都不起作用。对于台式机、移动设备以及任何其他分辨率，它必须完全居中。因此，更改
边距：45px自动
不适用于所有屏幕大小。他们将微调器放在整个视频元素的中间（就像我在第一个示例中所做的那样），并且视频大小是预设的，这样他们就可以知道微调器在每个大小的确切位置。顺便说一句，在我的小提琴我禁用了视频，所以我可以看到旋转器更长的时间，通过添加在视频URL的开始g。如果这就是问题所在。对于所有屏幕尺寸，将其居中似乎没有任何效果。。。。。还有其他想法吗？
.spinner {
      margin: 55px auto; // (video height / 2) - (spinner height / 2) 
      height: 40px;
      text-align: center;
      font-size: 10px;
    }

.spinner {
      margin: 32px auto; // (video height - controls height - 45px / 2) - (spinner height / 2) 
      height: 40px;
      text-align: center;
      font-size: 10px;
    }

.THG-placeholder {
   top: 0;
   left: 0;
   width: 100%;
   display: none; // show with display: flex;
   align-items: center;
   justify-content: center;
   height: Calc(100% - 36px);
   position: absolute;
   z-index: 1;
 }

 video {
   width: 100%;
 }

 .wrapper {
   position: relative;
   max-width: 460px; // or a percentage or whatever you like
 }