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的解决方案。

小提琴：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

Answer 2

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

使用第二个CSS：

fidd

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

2 个答案:

说明