javascript - 无法将加载器置于视频中心

Question

我有一个视频，我有一个缓冲区加载器。我似乎无法将其居中。我尝试了无数在网上找到的方法，但似乎没有什么适合它的。

我已经尝试了这里的每一种方法:http://vanseodesign.com/css/vertical-centering/

我已经尝试了这里的所有方法:https://www.w3.org/Style/Examples/007/center.en.html

我已经尝试了这里的所有方法:https://www.w3schools.com/css/css_align.asp

不是开玩笑，我不是在开玩笑。我已经尝试了一切。

没有任何工作....

同样在移动设备上，蓝色加载器最终出现在视频的底部并且没有居中，这意味着我不能使用边距，因为它需要针对每个屏幕尺寸居中。虽然微调器类需要这个边距 margin: 100px auto; 否则加载器不会出现......

它需要在父 div 上有 Position: absolute;。

它还需要在父 div 上有 display: none; 以便在 javascript 调用它之前隐藏它。现在无论我做什么，我都会得到这个:

Desktop Problem image <--

Mobile problem image <--

“你好，你好吗”居中。蓝色装载机不是。蓝色加载器需要居中。

它必须在类似于我在这里制作的网格中工作:https://jsfiddle.net/9faxe587/2/

var video = document.getElementById("video_1");
var placeholder = document.getElementById("placeholder_1");
placeholder_1.style.top = video_1.offsetTop + "px";
placeholder_1.style.left = video_1.offsetLeft + "px";

video_1.onwaiting = function() {
  showPlaceholder(placeholder_1, this);
};
video_1.onplaying = function() {
  hidePlaceholder(placeholder_1, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner>div {
  background-color: #0080ff;
  height: 100%;
  width: 5.5px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4)
  }
  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes sk-stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.THG-placeholder {
  display: none;
  position: absolute;
  z-index: 1;
}

.THG-video {
  width: 100% !important;
  height: auto !important;
  max-height: 380px;
  max-width: 512px;
  z-index: 1;
}

<video class="THG-video" id="video_1" controls preload="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<div id="placeholder_1" class="THG-placeholder">
  <div class="spinner">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>

Answer 1

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

fiddle :https://jsfiddle.net/Ldhoo0f6/5/

.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
 }

解释

整个元素都有一个带有 position: relative 的包装器 div，因此绝对定位的元素将在该 div 的约束范围内。
该视频的宽度为 100%，因此它具有响应能力。
包装器 div 使用 max-width

确定视频的大小

占位符元素有js添加的display: flex
它以 Flexbox align-items 和 justify-content 为中心。
高度使用 Calc 来调整视频控件的高度 - 尽管这可能因浏览器而异(我使用的是 Chrome)。如果您不太迂腐，可以只使用 100%。

Flexbox 现在得到了很好的支持:https://caniuse.com/#feat=flexbox