如何把一个旋转器在引导3 div cold -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文档:

位置:绝对

元素从正常文档流中删除，并且没有空格为页面布局中的元素创建。相对定位到最近的祖先(如有);否则，放置

位置:固定

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

我也改变了#cover-div-spindisplay: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% -旋转器宽度的一半(在你的情况下，旋转器是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 3

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

你只需要在#cover-div-spin::后面加上这3行，否则所有的代码行都是完美的。

当我们移动任何元素的顶部和左侧的50%时，我们必须减去元素的-50%，无论我们使用的是哪一边。

如果我们想要垂直居中对齐，那么它会像top:50%;trasnfrom: translateY (-50%);如果我们需要水平居中，那么左:50%;trasnfrom: translateX (-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>