Css 使文本保持在垂直进度条内+；垂直对齐：居中

我有两个问题无法解决

首先：我希望文本保持在主div内，这样当进度条的高度接近底部时，它就不会超出主div

第二个：有没有办法将文本垂直居中，以便它与第一个问题/解决方案一起工作

$（函数（）{
函数重新填充（）{
$（“进度条填充”）。设置动画({
身高：“100%”
}，5000，函数（）{
$（“进度条填充”）。设置动画({
高度：“0%”
}，5000，函数（）{
重新填充（）；
});
});
}
重新填充（）；
});
#进度条{
位置：绝对位置；
宽度：30px；
身高：80%；
边框：1px纯黑；
边界半径：11px；
排名前10%；
左：14px；
背景：rgba（255,72,72,0.04）无重复滚动0%0%；
}
#进料杆{
宽度：继承；
背景：绿色；
边界半径：11px；
身高：0%；
位置：绝对位置；
底部：0px；
明确：两者皆有；
文本对齐：居中；
显示：内联块；
}
#progressBar_填充跨度{
垂直对齐：中间对齐
显示：内联块；
}

50%
首先：
#progressBar{overflow:hidden；}
第二：将
50%
置于
#进度条(u fill
之外并添加
位置：绝对；最高：50%到此元素
从进度条中取出量程并更新量程位置。
这是一把小提琴


$（函数（）{
函数重新填充（）{
$（“进度条填充”）。设置动画({
身高：“100%”
}，5000，函数（）{
$（“进度条填充”）。设置动画({
高度：“0%”
}，5000，函数（）{
重新填充（）；
});
});
}
重新填充（）；
});
#进度条{
位置：绝对位置；
宽度：30px；
身高：80%；
边框：1px纯黑；
边界半径：11px；
排名前10%；
左：14px；
背景：rgba（255,72,72,0.04）；
}
#进料杆{
宽度：继承；
背景：绿色；
边界半径：11px；
身高：0%；
位置：绝对位置；
底部：0px；
文本对齐：居中；
显示：内联块；
}
#进度杆跨度{
位置：相对位置；
最高：50%；
z指数：2；
}

50%
使用
显示：表格；表格单元格
会有所帮助，您需要像我一样添加更多额外的标记，通过使用此方法，您的内容将始终保持在中间位置


$（函数（）{
函数重新填充（）{
$（“进度条填充”）。设置动画({
身高：“100%”
}，5000，函数（）{
$（“进度条填充”）。设置动画({
高度：“0%”
}，5000，函数（）{
重新填充（）；
});
});
}
重新填充（）；
});
#进度条{
位置：绝对位置；
宽度：30px；
身高：80%；
边框：1px纯黑；
边界半径：11px；
排名前10%；
左：14px；
背景：rgba（255,72,72,0.04）无重复滚动0%0%；
}
#进料杆{
宽度：继承；
背景：绿色；
边界半径：11px；
身高：0%；
位置：绝对位置；
底部：0px；
明确：两者皆有；
文本对齐：居中；
显示：内联块；
}
#progressBar_填充跨度{
垂直对齐：中间对齐；
显示：表格；
身高：100%；
宽度：100%
}
#progressBar_填充跨度em{
垂直对齐：中间对齐；
显示：表格单元格；
身高：100%；
宽度：100%
}

50%
使用这些HTML，而不是您的HTML

看这些小提琴

使用了@Danko的部分代码

<div id="progressBar" style="overflow:hidden;">
   <span class="spanCenter">50%</span>
  <div id="progressBar_fill">   
  </div>
</div>

对不起，我想说的是在绿色条内垂直对齐，所以它沿着绿色条上下对齐；添加相对于#progressBar_fill的位置；左加：0；要跨越元素（不要删除以前添加的代码），谢谢：），所以没有真正与IE8兼容的解决方案？这应该适用于IE8：；不幸的是，您必须在其他地方测试它，而不是在jsfiddle.net上。您已经在代码中使用了rgba。那在中国行不通IE8@user3660683您可以删除一些冗余的CSS。例如
垂直对齐：中间显示：内联块
没有做任何有用的事情。非常感谢，这解决了一个问题：）有没有办法使文本保持在主div中，以便始终可见？50%在父div中，
.spanCenter
{
  position:absolute; 
  top:50%;
  z-index:10000;
}