Css 响应div中的居中图标

我正试图在它的父分区中居中放置一个很棒的字体图标（play）。我可以通过使用px添加适当的填充来实现这一点，但当引导网格小于某个大小（移动）时，无法使其保持居中

我需要使用javascript来实现这一点，还是可以使用css

有没有办法让字体图标的大小随其父div的增大/减小

动画gif显示播放按钮未保持中间位置。-

小提琴。我尽了最大的努力来重现这一切。

---

查看编辑的代码，让我知道它是否适合您

.primaryContainer{
高度：自动；
左边距：自动；
右边距：自动；
最小高度：100%；
宽度：100%；
}
#盒子{
浮动：左；
高度：657px；
左缘：7.330357%；
明确：无；
宽度：82.932351%；
右边距：0%；
}
#框1{
浮动：左；
明确：无；
宽度：58.843155%；
背景色：rgb（69,025）；
}
#框2{
浮动：左；
身高：100.014605%；
左边缘：0%；
边际上限：0px；
明确：无；
背景色：rgb（237,17,17）；
最小宽度：0%；
文本对齐：居中；
}
法兰西{
显示：内联块；
字体：普通14px/1字体；
字体大小：继承；
文本呈现：自动；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
英足总：以前{
内容：“\f04b”；
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
显示：内联块；
}
A.足球比赛{
字号：26px；
显示：内联块；
宽度：200px；
高度：200px；
}

请避免使用链接缩短器和链接到外部站点。用小提琴复制你的问题，并发布一些代码给我们看你的代码。好的，我在上面！为错误道歉感谢您的输入，但在我的小提琴示例中，蓝色div是标题名称所在的位置。此外，如果您拖动并收缩浏览器，您将看到红色div和蓝色div正在变小。这时播放按钮不再在中间。还有人有什么建议或给我指出正确的方向吗。你可以在不同的断点上设置w/h为.fa，就像在红色和蓝色方框中一样。但是我遇到的问题显示在第一篇文章的gfycat链接上。当最后一个断点命中时，框的大小会缩小，播放按钮不会随之缩小。

.fa-play:before {
    content: "\f04b";
}

.fa-play {
    font-size: 26px;
    padding: 36%;
    display: inline-block;
}