Question

我正在玩this code on codepen并且我正在尝试在动画圆圈下放置文本并在视口中居中，但我似乎找不到办法来做到这一点。我已在文字上设置background: yellow;以查看可见性。

如果你知道解决方案的原因，那么如果你能在这里解释一下，让我理解/学习，将会非常有帮助。

Answer 1

试试这个：https://codepen.io/Lansana/pen/ezvVYR

HTML：

<div class="spinner-wrapper">
    <div class='spinner'>
                <div class='quadrant'></div>
                <div class='quadrant'></div>
                <div class='quadrant'></div>
                <div class='quadrant'></div>
    </div>
    <div class='text'>test</div>
</div>

CSS：

html,
body {
  height: 90%;
}

body {
  background: #c2c2c2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
    background: yellow;
    text-align: center;
}

.spinner-wrapper {
    width: auto;
    height: auto;
    position: relative;
}

.spinner {
  width: 300px;
  height: 300px;
    min-width: 300px;
  position: relative;
  animation: spin 60s linear infinite;
  //border-radius: 300px;

.quadrant {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    //z-index: 10;
        mix-blend-mode: multiply;
    //opacity: .5;
    &:after {
      content: "";
      color: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
    &:nth-child(1) {
      animation: slide_horiz_neg 12s linear alternate infinite;
      &:after {
        //mix-blend-mode: multiply;
        //opacity: .5;
        background: cyan;
      }
    }
    &:nth-child(2) {
      animation: slide_vert_neg 8s linear alternate infinite;
      &:after {
        //mix-blend-mode: multiply;
        //opacity: .5;
        background: yellow;
      }
    }
    &:nth-child(3) {
      animation: slide_horiz_pos 10s linear alternate infinite;
      &:after {
        //mix-blend-mode: multiply;
        //opacity: .5;
        background: magenta;
      }
    }
   /* &:nth-child(4) {
     // animation: slide_vert_pos 3.5s linear alternate infinite;
      &:after {
        mix-blend-mode: normal;
        //opacity: .5;
        background: #000000;
      }
    } */
  }
}

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

@keyframes slide_vert_pos {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(1%);
  }
}

@keyframes slide_vert_neg {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-1%);
  }
}

@keyframes slide_horiz_pos {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(1%);
  }
}

@keyframes slide_horiz_neg {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-1%);
  }
}

我创建了一个包装器，其中包含您的微调器和文本。

包装器具有自动高度/宽度，基于它的子元素。

文本可以在包装器中以任何方式定位，除了两者放在dom中的顺序之外，它不会受到微调器的影响。

Answer 2

修改了您可以查看代码集的代码

https://codepen.io/anon/pen/KMWZOM

HTML

<div class="wrapper">
    <div class='spinner'>
            <div class='quadrant'></div>
            <div class='quadrant'></div>
            <div class='quadrant'></div>
            <div class='quadrant'></div>
    </div>
    <div class='text'>test</div>
</div>

CSS

html,
body {
  height: 90%;
}

.wrapper{
    position:relative;
    margin:0 auto;
}

body {
  background: #c2c2c2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
    position: absolute;
    background: yellow;
    top:50%;
    left:50%;
}

.spinner {
  width: 300px;
  height: 300px;
    min-width: 300px;
  position: relative;
  animation: spin 60s linear infinite;
  //border-radius: 300px;

.quadrant {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    //z-index: 10;
        mix-blend-mode: multiply;
    //opacity: .5;
    &:after {
      content: "";
      color: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
    &:nth-child(1) {
      animation: slide_horiz_neg 12s linear alternate infinite;
      &:after {
        //mix-blend-mode: multiply;
        //opacity: .5;
        background: cyan;
      }
    }
    &:nth-child(2) {
      animation: slide_vert_neg 8s linear alternate infinite;
      &:after {
        //mix-blend-mode: multiply;
        //opacity: .5;
        background: yellow;
      }
    }
    &:nth-child(3) {
      animation: slide_horiz_pos 10s linear alternate infinite;
      &:after {
        //mix-blend-mode: multiply;
        //opacity: .5;
        background: magenta;
      }
    }
   /* &:nth-child(4) {
     // animation: slide_vert_pos 3.5s linear alternate infinite;
      &:after {
        mix-blend-mode: normal;
        //opacity: .5;
        background: #000000;
      }
    } */
  }
}

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

@keyframes slide_vert_pos {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(1%);
  }
}

@keyframes slide_vert_neg {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-1%);
  }
}

@keyframes slide_horiz_pos {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(1%);
  }
}

@keyframes slide_horiz_neg {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-1%);
  }
}

Answer 3

你也可以试试这个：

.text {
  position: relative;
  background: yellow;
  right: 150px;
  top: 200px;
}

由于你的微调器的周长是300px，为了将它直接置于下方，我将它除以一半并将该位置分配给文本以使其居中以及任何高于150px的数字以便在圆圈下方定居。请记住，这些立场是倒置的。向右移动它，依此类推。

Answer 4

如果您使用flex，则将其应用于HTML，以便主体可以缩小内容。 margin-left:-50%;效率很高，可以用来居中一个元素。

对于vertical-align，您可以使用（或者） display : inline-block / inline-table + vertical-align:middle来居中2元素并排。

基本上，你的CSS模板可以变成

html {
    height: 90%;
    background: #c2c2c2;
    display: flex;
    align-items: center;
    justify-content: center;
}

body {margin:0;}

.text {
    background: yellow;
    display: inline-table;/* or inline-block to vertical align */
    vertical-align: middle;
    margin-left: -50%;/* body flex-child takes width of content, not window ;) */
    position: relative;/* bring it up front , add z-index too if needed */
}

.spinner {
    display: inline-block;/* not a flex-child anymore & float doesn't allow vertical-align */
    vertical-align: middle;/* says itself */
    width: 300px;
    height: 300px;
    min-width: 300px;
    position: relative;
    animation: spin 60s linear infinite;
}

...和渲染 - ＆gt; https://codepen.io/anon/pen/qNrxPQ

在此代码示例中将一个div放在另一个div下

4 个答案: