Css flexbox未对齐：在&；之后：在firefox和safari中正确使用之前

我正在制作加载动画。我的问题是，用flexbox将它们居中似乎只能在Chrome中正常工作。

：before

和

：after

在Firefox中位于其父div的底部，在safari中位于顶部

脉冲箱{ 宽度：100%； 高度：100px； 显示器：flex； 证明内容：中心； 对齐项目：居中； } #脉搏{ 位置：相对位置； 宽度：12.5px； 高度：50px； 动画：脉冲750ms无限大； 动画延迟：250ms； 显示器：flex； 证明内容：中心； 对齐项目：居中； } #脉搏：之前， #脉搏：之后{ 内容：''； 位置：绝对位置； 显示：块； 宽度：12.5px； 身高：33.3px； 背景：#efef； 动画：脉冲750ms无限大； } #脉搏：以前{ 左：-25px； /*-（脉冲高度/1.5）*/ } #脉搏：之后{ 左：25px； /*（脉冲高度/1.5）*/ 动画延迟：500ms； } @关键帧脉冲{ 0%, 10% { 背景：#efef； } 50% { 背景：#5b； } }

试试看

#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%);
}

试试看

#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%);
}