IE中的CSS3动画错误

我试图建立一个简单的CSS3动画，一个较大的正方形（居中）内的脉冲正方形

它似乎工作得很好，除了在IE上，在动画结束时，内部正方形向上移动到其父对象的左侧

我没有找到解决办法，请帮帮我。我做错了什么

#foo{   
    position: relative;
    display: table;
    margin: auto;
    width: 100px;
    height: 100px;
    top: 50px;
    background: #ccf;
}
#foo::before{   
    content:"";
    position: absolute;
    display: inline-block;
    width: 50%;
    height: 50%;
    left:   50%;
    top: 50%;
    background: #55a;
    animation: 1s ease-in-out infinite pulse;
}

@keyframes pulse {
    0%      {   transform: translate(-50%, -50%) scale(.2,.2); }
    50%     {   transform: translate(-50%, -50%) scale(.8,.8); }
    100%    {   transform: translate(-50%, -50%) scale(.2,.2); }
}

---

这里有一个

多么奇怪。看起来IE和Edge在重置后续循环中的变换时遇到了一些问题

虽然我找不到浏览器渲染问题的直接解决方案（可能是一个bug），但您的示例看起来是一个很好的使用场所。由于没有额外的翻译使其居中，它在IE中工作，并且更简单

工作示例（）：

#foo{
位置：相对位置；
显示：表格；
保证金：自动；
宽度：100px；
高度：100px；
顶部：50px；
背景：#共因失效；
}
#福：以前{
内容：“；
位置：绝对位置；
显示：内联块；
宽度：50%；
身高：50%；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
背景：#55a；
动画：1s慢进慢出无限脉冲；
}
@关键帧脉冲{
0%{变换：比例（.2，.2）；}
50%{变换：比例（.8，.8）；}
100%{变换：比例（.2，.2）；}
}

---

哦！我不知道将标签居中的方法，您完全解决了我的问题，谢谢。你一枪就帮了我两次