如何将微调器放在引导程序 3 div col-md-x 的中心？

Question

我想在包含视频的 div 中放置一个微调器。

此视频需要几秒钟才能显示，因为它托管在 aws 上。

我已经成功地制作了微调器，但它占据了整个页面。我无法让它适应输入的 div。

#cover-div-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(0,0,0,0.7);
    z-index:2;
    /*display:none;*/
}

/* Safari */
@-webkit-keyframes spin {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#cover-div-spin::after {
    /*position: fixed;*/
    left: 50%;
    top: 50%;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #c4040c;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

<div class="col-md-4" style="background:orange;">
  <span><b>Example</b></span>
  <div align="center" class="embed-responsive embed-responsive-16by9">
     <div id="cover-div-spin"></div>
     <video class="embed-responsive-item" src="" controls muted></video>
  </div>
</div>

https://jsfiddle.net/JorgePalaciosZaratiegui/pdzm1ano/17/

有解决这个问题的想法吗？

提前致谢。

Answer 1

首先，您的#cover-div-spin 应该有一个absolute position 而不是fixed。

要了解更多关于定位的信息，请阅读MDN docs：

位置：绝对

元素从正常的文档流中移除，没有空格 为页面布局中的元素创建。 相对定位 到它最近的定位祖先，如果有的话；否则，它被放置 相对于初始包含块。

位置：固定

元素从正常的文档流中移除，没有空格 为页面布局中的元素创建。 相对定位 到视口建立的初始包含块

我还更改了 hte #cover-div-spin display:flex;，它可以让我们轻松地将微调器居中。

#cover-div-spin {
    position:absolute; /* absolute instead of fixed */
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(0,0,0,0.7);
    z-index:2;
    display: flex;  /* Allow us to easily center the spinner */
    align-items: center; /* Vertical alignement */
    justify-content: center; /* Horizontal alignement */
}

/* Safari */
@-webkit-keyframes spin {
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#cover-div-spin::after {
    /* Removed all position rules */
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #c4040c;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    content:'';
    display:block;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4" style="background:orange;">
  <span><b>Example</b></span>
  <div align="center" class="embed-responsive embed-responsive-16by9">
     <div id="cover-div-spin"></div>
     <video class="embed-responsive-item" src="" controls muted></video>
  </div>
</div>

Answer 2

确切地说，left 和 top 不能是完整的50%，但是，50% - 微调器宽度的一半（在您的情况下微调器是 100 像素，所以一半是 50 像素），例如这个（我只是改变左边和顶部，并在底部删除重复的左边和顶部）

#cover-div-spin::after {
    /*position: fixed;*/
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #c4040c;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    content:'';
    display:block;
    position:absolute;
    /* left:48%; top:40%; remove this */
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

如果您只想在 div 上制作微调器，只需将 #cover-div-spin 上的位置更改为绝对位置，就像这样

#cover-div-spin {
  position:absolute;
}

Answer 3

#cover-div-spin::after {
  left:50%;
  top:50%;
  transform:translate(-50%, 50%);
}

你必须在 #cover-div-spin::after 中添加这 3 行，否则所有代码行都是完美的。

当我们将任何元素向上和向左移动 50% 时，我们必须减去我们使用的元素 -50%。

如果我们想垂直居中对齐，那么它将类似于 top:50%;翻译：翻译Y（-50％）；如果我们需要水平居中，那么 left:50%;翻译：翻译X（-50％）；如果我们需要水平和垂直居中，那么你可以使用上面的代码；

Answer 4

以下示例可能会有所帮助。

.col-md-4,
.embed-responsive {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-flow: column;
}
.col-md-4 span {
  height: 100%;
}
.col-md-4 {
  height: 12rem;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#cover-div-spin {
  background-color: transparent;
  z-index: 2;
  width: 8rem;
  height: 8rem;
  position: absolute;
}
#cover-div-spin::after {
  border: 1rem solid #f3f3f3;
  border-radius: 50%;
  border-top: 1rem solid #c4040c;
  width: 6rem;
  height: 6rem;
  align-self: center;
  content: '';
  display: inline-flex;
  -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}
.embed-responsive-item {
  z-index: 1;
  top: 2rem;
  position: absolute;
}

<div class="col-md-4" style="background:orange;">
  <span><b>Example</b></span>
  <div id="cover-div-spin"></div>
  <div class="embed-responsive embed-responsive-16by9">   
    <video class="embed-responsive-item" src="" controls muted></video>
  </div>
</div>