Question

我在我的应用程序中使用了加载程序，但我无法正确地将其置于中心位置。

当你要看到它稍微移动到屏幕的左侧时。

这里是小提琴：Loader

这是HTML代码：

  <div class="loader">
      <div class="loader__hexagon loader__hexagon--value"></div>
      <div class="loader__hexagon loader__hexagon--value"></div>
      <div class="loader__hexagon loader__hexagon--value"></div>
  </div>

这是SCSS代码：

.loader-graph-default{
      background-color: black;
      display: none;
  }

  .loader-graph-loading{
      display: inline;
      position: absolute;
      z-index: 100;
      height: 100%;
      width: 100%;
  }

  .loader {
    background: none;
    position: relative;
    width: 60px;
    height: 60px;
    margin: auto;
    text-align: center;

    &__hexagon {
      position: absolute;
      width: 12px;
      height: 20px;
      margin: 5px;
      transform: rotate(30deg);
      animation: fade 1s infinite;
      animation-delay: 0s;
      background: white;  

      &--value {
          background: #009ECB;
      }

      &:first-of-type {
        top: 20px;
        left: -12px;
        animation-delay: .4s;
      }

      &:last-of-type {
        top: 20px;
        left: 12px;
        animation-delay: .2s;
      }

      &:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 12px;
        height:20px;
        background: inherit;
        transform: rotate(-62deg);
      }

      &:after {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 12px;
        height: 20px;
        background: inherit;
        transform: rotate(62deg);
      }
    }
  }

  @keyframes fade{
    0%{
      opacity: 1;
    }

    50%{
      opacity: .1;
    }

    100%{
      opacity: 1;
    }
  }

如果你去小提琴，你用班级＆＃34;装载机＆＃34;检查div。你可以看到它没有居中。

我错过了什么？

Answer 1

您可以将loader宽度60px设置为48px来解决此问题。检查下面更新的代码段。

.loader-graph-default {
    background-color: black;
    display: none;
}
.loader-graph-loading {
    display: inline;
    position: absolute;
    z-index: 100;
    height: 100%;
    width: 100%;
}
.loader {
    background: none;
    position: relative;
    width: 48px;
    height: 60px;
    margin: auto;
    text-align: center;
    left: 12px;
}
.loader__hexagon {
    position: absolute;
    width: 12px;
    height: 20px;
    margin: 5px;
    transform: rotate(30deg);
    animation: fade 1s infinite;
    animation-delay: 0s;
    background: white;
}
.loader__hexagon--value {
    background: #009ECB;
}
.loader__hexagon:first-of-type {
    top: 20px;
    left: -12px;
    animation-delay: 0.4s;
}
.loader__hexagon:last-of-type {
    top: 20px;
    left: 12px;
    animation-delay: 0.2s;
}
.loader__hexagon:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 20px;
    background: inherit;
    transform: rotate(-62deg);
}
.loader__hexagon:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 20px;
    background: inherit;
    transform: rotate(62deg);
}
@keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}

<div class="loader">
  <div class="loader__hexagon loader__hexagon--value"></div>
  <div class="loader__hexagon loader__hexagon--value"></div>
  <div class="loader__hexagon loader__hexagon--value"></div>
</div>

Answer 2

当你旋转div时，当然它会改变它的中心点，所以我只是重新定位它。

.loader-graph-default{
      background-color: black;
      display: none;
  }

  .loader-graph-loading{
      display: inline;
      position: absolute;
      z-index: 100;
      height: 100%;
      width: 100%;
  }

  .loader {
    background: none;
    position: relative;
    width: 60px;
    height: 60px;
    margin: auto;
    text-align: center;

    &__hexagon {
      position: absolute;
      width: 12px;
      height: 20px;
      margin: 5px;
      transform: rotate(30deg);
      animation: fade 1s infinite;
      animation-delay: 0s;
      /*background: $uiColor;*/
      background: white;

      /*
      &--carbon {
        background: $carbon;
      }

      &--value {
        background: $value;
      }

      &--research {
        background: $research;
      }

      &--quality {
        background: $quality;
      }
      */
      
      &--value {
          background: #009ECB;
      }

      &:first-of-type {
    top: 20px;
    right: 50%;
    margin-left: 3px;
    animation-delay: 0.4s;
      }

      &:last-of-type {
    top: 20px;
    left: 50%;
    animation-delay: 0.2s;
    margin-left: 6px;
      }
  &:nth-child(2) {
    left: 50%;
    margin-left: -6px;
}
      &:before {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 12px;
        height:20px;
        background: inherit;
        transform: rotate(-62deg);
      }

      &:after {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 12px;
        height: 20px;
        background: inherit;
        transform: rotate(62deg);
      }
    }
  }

  @keyframes fade{
    0%{
      opacity: 1;
    }

    50%{
      opacity: .1;
    }

    100%{
      opacity: 1;
    }
  }

  <div class="loader">
          <div class="loader__hexagon loader__hexagon--value"></div>
          <div class="loader__hexagon loader__hexagon--value"></div>
          <div class="loader__hexagon loader__hexagon--value"></div>
      </div>

Fiddle

Answer 3

你已经将左：-12px添加到了div的第一个，类为“loader__hexagon loader__hexagon - value”，它将整个块向左移动-12px。

Loader的宽度也不是60px。风格应如下所示：

.loader__hexagon:first-of-type {
top: 20px;
animation-delay: 0.4s;}

为第二个孩子添加样式：

.loader__hexagon:nth-child(2) {
   left: 12px; }

编辑第三个孩子的风格：

.loader__hexagon:last-of-type {
    top: 20px;
    left: 23px;
    animation-delay: 0.2s; }

将加载程序的宽度减少到45px：

.loader {
   background: none;
   position: relative;
   width: 45px;
   height: 60px;
   margin: auto;
   text-align: center;  }

Answer 4

你在六边形上使用绝对定位，这就是为什么它们没有居中，尝试一种不同的方法，例如显示：带底部六边形的调整边距（中间有一些空间）的内联块。

  &__hexagon {
    margin: 0 auto;
  }
  &:first-of-type {
    display: block;
  }
  &:nth-child(2) {
    margin-right: 4px;
    display: inline-block;
  }
  &:last-of-type {
    margin-left: 4px;
    display: inline-block;
  }

fiddle

无法设法使加载器居中

4 个答案: