如何将微调器放在 bootstrap 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

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

#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 2

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

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

位置：绝对

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

位置：固定

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport

我还更改了 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 3

类似以下示例的内容可能会有所帮助。

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

Answer 4

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

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

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

如果我们想垂直居中对齐，那么它会像 top:50%; trasnfrom:translateY(-50%)；如果我们需要水平居中，那么 left:50%; trasnfrom:translateX(-50%)；如果我们需要水平和垂直居中，那么你可以使用上面的代码；

如何将微调器放在 bootstrap 3 div col-md-x 的中心？

How to put a spinner in the center of a bootstrap 3 div col-md-x?

html

css

twitter-bootstrap-3

spinner

位置：绝对

位置：固定