flexbox 未对齐 :after & :before 在 firefox 和 safari 中正确

Question

我正在制作加载动画。我的问题是，将这些与 flexbox 居中似乎只能在 Chrome 中正常工作。 :before & :after 在 Firefox 中位于其父 div 的底部，在 safari 中位于顶部。

#pulse-box {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pulse {
  position: relative;
  width: 12.5px;
  height: 50px;
  animation: pulse 750ms infinite;
  animation-delay: 250ms;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pulse:before,
#pulse:after {
  content: '';
  position: absolute;
  display: block;
  width: 12.5px;
  height: 33.3px;
  background: #efefef;
  animation: pulse 750ms infinite;
}

#pulse:before {
  left: -25px;
  /*  -(pulse height / 1.5) */
}

#pulse:after {
  left: 25px;
  /* (pulse height / 1.5) */
  animation-delay: 500ms;
}

@keyframes pulse {
  0%,
  10% {
    background: #efefef;
  }
  50% {
    background: #5b5b5b;
  }
}

<div id="pulse-box">
  <div id="pulse" />
</div>

你也可以在我做的jsfiddle看到这个。

Answer 1

试一试...

#pulse::before, #pulse::after {
    content: '';
    position: absolute;
    display: block;
    width: 12.5px;
    height: 33.3px;
    background: #efefef;
    animation: pulse 750ms infinite;
    top: 50%;
    transform: translateY(-50%);
}

https://jsfiddle.net/opt4jmmt/