您可以添加一个带有某种样式的<div>，以在其下方获得居中的标题，如下所示：

$("#progressbar").progressbar({
    value: 37
}).append("<div class='caption'>37%</div>");​​​​​​​​​​

还有一些CSS：

​#progressbar .caption​ { width: 50px; margin: 0 auto; }​

You can give it a try here，只需使用$("#progressbar .caption").html(value)更新即可。

这更像是一个CSS问题。我把标签直接放在进度条的中心。我的做法是：
将进度条代码 Package 在div中，并在容器的末尾加上空白div。然后，将标签预先挂在容器中，并在左侧加上float。在标签中添加一些空间，使其不会接触到进度条的侧面：

<div id='pb_container'>
    <div style='float: left' id='label'>&nbsp;&nbsp;&nbsp;My Label</div>
    <div id='pb'></div>
    <div style="clear: both;"></div>
</div>

示例化进度条，标签应该在进度条中浮动，向左一点。你必须调整元素的填充和宽度/高度，让它浮动在你想要的位置。（比如，进度条的中心）
Try it here。正如您从我的CSS代码中所看到的，要将其正确地居中需要一点调整，但看起来不错。

试试这个，很简单：

<div id="progressBar" class="progressBar">
    <span class="progressBarText">In Progress</span>
</div>

CSS：

.progressBar {
width:80%;
margin:auto;
position:relative;
height:50px;
line-height:50px;
text-align:center;
}
.progressBarText {
    color: white;
    position: absolute;
    width: 50%;
    left:25%;
}
<script>
$('#progressBar').progressbar(
            {
                value: 80

            });
</script>