How do I vertically center a progress bar?

[joeyak]

I have a progress bar in a table, and I'd like to vertically center it, but can't seem to figure it out. I tried to use flex display and align-items center but it doesn't seem to center all the way. It ends up looking like this

<td>
    { percent(earnedPoints, level.Points) }%
    <progress style="width: 3em;" value={ percent(earnedPoints, level.Points) } max="100"></progress>
</td>

[vardumper]

This should be plain CSS (done with vertical-align). Also note the line-height it can help.
https://codepen.io/Erik-P-hler/pen/poBNKLz

[joeyak]

I had to halve the bottom margin since pico sets it, but this is what got it centered.

td>progress {
    vertical-align: middle;
    margin-bottom: calc(var(--pico-spacing) * .25);
}