Progress bars: center labels vertically and set height on parent .progress

Created by: davethegr8

These changes address the suggestions outlined in #22702 (closed)

The changes include:

• Setting labels to center vertically: There is no visual difference in the base case, but in cases where the height of the bar is not the default, behaves better.

Before:

After:

• Moving where custom heights are set from .progress-bar to .progress. Again, there is no change in the base case, but on non-default heights it behaves better (more flexible/ maintainable). This is especially useful when using multiple bars.

Before (you have to set them all to be the same height):

<div class="progress">
  <div class="progress-bar" style="width: 15%; height: 3rem;">1</div>
  <div class="progress-bar bg-success" style="width: 30%; height: 3rem;">2</div>
  <div class="progress-bar bg-info" style="width: 20%; height: 3rem;">3</div>
</div>

After (only one change):

<div class="progress" style="height: 3rem;">
  <div class="progress-bar bg-warning" style="width: 15%;">1</div>
  <div class="progress-bar bg-success" style="width: 30%;">2</div>
  <div class="progress-bar bg-info" style="width: 20%;">3</div>
</div>

You can still change the heights to be different if you want, but it's less work in the base case.

<div class="progress" style="height: 3rem;">
  <div class="progress-bar bg-success" style="width: 30%;">2</div>
  <div class="progress-bar bg-info" style="width: 20%; height: 1rem;">3</div>
</div>