css - flexbox不对齐:after和:before在Firefox和Safari中正确

我正在制作加载动画。我的问题是，以flexbox为中心只能在Chrome中正常工作。 :before和:after在Firefox中位于其父div的底部，而在野生动物园中则位于其顶部。

#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中看到它。

最佳答案

快去...

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

关于css - flexbox不对齐:after和:before在Firefox和Safari中正确，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42776744/