Center alignment not consistent - html

Question

I'm trying to get the duration and current time text to stay centered vertically. Why is it that sometimes it will no center, and other times if I do a refresh, it works suddenly, even though I didn't change any code?
Here's a screenshot of it not working: Not Working
And here's another after doing a hard refresh, but not changing any of the code: Working
It's almost as if it's a hit or miss.
<div class="player-controls">
<div>
<button id="playpause-button">
<i class="fas fa-play fa-lg"></i>
</button>
</div>
<div class="time-container">
<span id="currenttime">00:00</span>
</div>
<div class="time-rail-container">
<div id="time-rail"></div>
</div>
<div class="time-container">
<span id="duration">00:00</span>
</div>
<div>
<button id="rewind-button">
<i class="fas fa-undo fa-lg"></i>
</button>
</div>
<div>
<button id="speed-button">
<i class="fas fa-tachometer-alt fa-lg"></i>
</button>
</div>
<div>
<button id="captions-button">
<i class="fas fa-closed-captioning fa-lg"></i>
</button>
</div>
<div>
<button id="volume-button"><i class="fas fa-volume-up fa-lg"></i></button>
</div>
</div>
Here's the CSS sheet:
.player-controls {
background: #2f2f2f;
display: block;
padding: 0;
margin: 0 auto;
text-align: left;
width: 840px;
height: 52px;
user-select: none;
}
.player-controls button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
color: #fff;
}
.time-rail-container {
width: 443px;
}
.player-controls > div {
margin: 0 0 5px 0;
display: inline-block;
}
#playpause-button,
#rewind-button,
#speed-button,
#captions-button,
#volume-button {
padding: 0;
margin: 0 1px 0 0;
width: 56px;
height: 50px;
}
.time-container {
height: 50px;
line-height: 50px;
text-align: center;
}
#duration,
#currenttime {
vertical-align: middle;
}

Answer 1

It is because it isn't sure what to be referencing for the vertical-align since not all the elements you are trying to align are next to each other. Instead of aligning those two vertically, you need to set the vertical align on all of the elements inside of the player-controls.
.player-controls > * {
vertical-align: middle;
}

Answer 2

I echo user "Sticker"s advise... Try to add vertical-align:middle CSS to .player-controls button like below : here is a plunker https://plnkr.co/edit/tldchkIWflEDUFBQxZIw?p=preview
.player-controls button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
color: #fff;
vertical-align:middle;
}