progress-bar: When adding labels to non-default height bars, text displays at the top of the bar

Created by: davethegr8

Apologies if this is a duplicate or intentional, I searched but wasn't able to find any matches.

In the latest bootstrap 4 (alpha6), when adding a non-default height to a .progress-bar, labels render at the top of the bar.

For example, taking the basic example from https://v4-alpha.getbootstrap.com/components/progress/#labels and adding a height, the label shows at the top of the bar (I'd guess it should be middle?)

<div class="progress">
  <div class="progress-bar" role="progressbar" 
       style="height: 2rem; width: 25%; align-items: center;" 
       aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

This could be addressed by adding display: flex; and align-items: center; to .progress-bar but that feels a bit weird to me.

While considering the impacts to other things in these changes, I also noticed that when using multiple bars, non-default heights behave more weirdly:

Using the flex/center changes makes it a little better, but not by much.

This all seems like a lot of work & headaches, so I'd like to make a small suggestion: change up progress bars so that the height gets set on .progress, and .progress-bar just has height: 100%. With the flexbox changes above, this leads to looking like so:

I think this ends up being a bit more flexible and maintainable, but I didn't want to drop a PR over the wall or come in and say "you should do things this way" because I don't know any context about why things are the way they are - I just know what I see and my uninformed assumptions.

Hopefully this helps, and I'll make a PR to detail all the differences just in case.