Javascript 相对于内容，将文本垂直居中于圆柱形div中

我试图将文本垂直放置在中心，但它没有停留在中心，因为它的内容正在改变，请帮助我

//注意parseInt
//音符停止
var person=[“妈妈在做饭”，“妈妈在做饭”，“朋友”，“老师]；
var情境=[‘开车’、‘走路’、‘聊天’、‘看巴胡巴利电影’]；
var=true；
var-spinCount=0；
var寿命计数=4；
函数go（）{
AddPersonSlot（$）；
moveSlots（$（“#slots_a.wrapper”），'a'）；
AddSituationSlot（$）；
moveSlots（$）；
}
$（文件）。准备好了吗(
函数（）{
AddPersonSlot（$）；
AddSituationSlot（$）；
}		
);
功能addPersonSlot（jqo）{
对于（变量i=0；i<15；i++）{
var ctr=Math.floor（Math.random（）*person.length）；
jqo.append（“+person[ctr]+”）；
}
}
功能添加情况批次（jqo）{
对于（变量i=0；i<15；i++）{
var ctr=Math.floor（Math.random（）*situation.length）；
jqo.append（“+情境[ctr]+”）；
}
}
功能移动插槽（jqo）{
var时间=1000；
time+=Math.round（Math.random（）*1000）；
jqo.stop（真，真）；
var marginTop=parseInt（jqo.css（“页边顶部”），10）
marginTop-=（7*100）
jqo.animate(
{“页边距顶部”：marginTop+“px”}，
{'duration'：时间，'easing'：“linear”}）.promise（）.done（函数（）
{
//警报（$（“div.slot”）.not（“：hidden”）.prop（“id”）；
});
}

。第一步div{
背景：#dddddd；
保证金：0自动；
文本对齐：居中；
填充：80px 0px；
位置：相对位置；
}
#反向链接{
位置：绝对位置；
左：34px；
底部：28px；
}
.问题计数{
高度：45px；
宽度：50px；
边界半径：10px；
边缘底部：10px；
背景：#e7e8e9；
}
.问题计数范围{
位置：相对位置；
顶部：4px；
字体大小：25px；
字号：700；
} 
.标签文本{
字体大小：20px；
颜色：#444；
字号：600；
}
.赚得的迪布斯{
字体大小：40px；
字号：600；
}
.problem-count.active{
高度：50px；
宽度：50px；
边界半径：10px；
边缘底部：10px；
背景：#fff！重要；
}
.便签{
填充：30px；
}
.第一轮{
背景：#fff；
保证金：0自动；
文本对齐：居中；
边界半径：15px；
宽度：320px；
填充：50px 0px；
}
.问题文本{
背景：#fff；
边界半径：10px；
溢出：自动；
宽度：376px；
字体大小：16px；
文本对齐：左对齐；
填充：15px；
颜色：#58585a；
最小高度：172px；
最大高度：172px；
}
.问题用户图标{
高度：25px；
宽度：25px；
背景#18b1a0；
边缘底部：10px；
}
.圆形标签{
字体大小：30px；
颜色：#f05f9d；
字号：700；
}
.圆形标签文本{
字体大小：24px；
颜色：#18b1a0；
光标：指针；
}
.count knowls分区{
显示：内联；
}
.knowls num、.dibbs num{
字体大小：25px；
字号：700；
}
.旋转标题{
字体大小：20px；
填充：8px 15px；
文本对齐：居中；
背景：ddd；
边界半径：10px；
字号：700；
宽度：268px；
位置：相对位置；
顶部：8px；
}
.所有权边界{
边框：5px点#999；
}
.页眉{
边际：0px；
}
#家长{
位置：相对位置；
背景：ddd；
填充：20px；
边界半径：15px 50px 50px 15px/8%80%80%8%；
溢出：隐藏；
填充：42px 0px 32px 0px；
}
#rcorners_父项：：之后{
内容：“；
位置：绝对位置；
排名前10%；
左：-15px；
宽度：25px；
身高：80%；
背景色：#bdbec0；
边界半径：100%；
}
#插槽a{
位置：相对位置；
背景：#fff；
填充：20px；
宽度：170px；
高度：100px；
边界半径：10px 50px 50px 10px/8%80%80%8%；
溢出：隐藏；
显示：内联块；
右边距：15px；
}
#插槽a：：之后{
内容：“；
位置：绝对位置；
排名前10%；
左：-15px；
宽度：25px；
身高：80%；
背景色：#109582；
边界半径：100%；
显示：内联块；
右边距：15px；
} 
#槽{
位置：相对位置；
背景：#fff；
填充：20px；
宽度：225px；
高度：100px；
边界半径：10px 50px 50px 10px/8%80%80%8%；
溢出：隐藏；
显示：内联块；
右边距：15px；
}
#槽b：：之后{
内容：“；
位置：绝对位置；
排名前10%；
左：-15px；
宽度：25px；
身高：80%；
背景色：#109582；
边界半径：100%；
显示：内联块；
右边距：15px；
} 
#插槽c{
位置：相对位置；
背景#18b1a0；
填充：20px；
宽度：225px；
高度：100px；
边界半径：10px 50px 50px 10px/8%80%80%8%；
溢出：隐藏；
显示：内联块；
}
#插槽c：：之后{
内容：“；
位置：绝对位置；
排名前10%；
左：-15px；
宽度：25px；
身高：80%；
背景色：#109582；
边界半径：100%；
显示：内联块；
}
.插槽{
字体大小：32px；
}
.slots.wrapper{
边缘顶部：6px；
宽度：100px；
}
.吃角子老虎{
宽度：100px；
高度：117px；
文本对齐：居中；
}
.旋转人{
字体大小：16px；
}
nob img先生{
位置：绝对位置；
顶部：18px；
右：-26px；
}
.旋转{
背景：#18b1a0！重要；
边框：1px实心#18b1a0！重要；
颜色：#fff！重要；
字体重量：600！重要；
}
.旋转：悬停{
背景：#18b1a0！重要；
边框：1px实心#18b1a0！重要；
颜色：#fff！重要；
字体重量：600！重要；
}
.旋转按钮{
填充：10px 34px；
边界半径：14px；
字号：600；
字体大小：20px；
}
.粉红{
背景#f05f9d；
边框：1px实心#f05f9d；
颜色：#fff；
字号：600；
}
粉红色：悬停{
背景#f05f9d；
边框：1px实心#f05f9d；
颜色：#fff；
字号：600；
}
.粉红色按钮{
填充：10px 11px；
边界半径：14px；
字号：600；
字体大小：16px；
}
.第一步，.第二步{
背景：#e1e65d！重要；
边界半径：25px；
字体大小：20px；
颜色：#fff；
边框颜色：#e1e65d！重要；
字号：600；
填充：10px 15px；
光标：指针；
}
.第三步{
背景：#f05e9d！重要；
边界半径：25px；
字体大小：20px；
颜色：#fff；
边框颜色：#f05e9d！重要；
字号：600；
填充：10px 15px；
光标：指针；
}
.第四步{
背景：#54cbec！重要；
边界半径：25px；
字体大小：20px；
颜色：#fff；
边框颜色：#54cbec！重要；
字号：600；
填充：10px 15px；
光标：指针；
}
.图标三角形底部{
波西蒂