It's an interesting issue to consider. The key is to understand that vertical-align: middle behaves differently compared to other alignments because it is affected by the lowercase letters of the parent element. To demonstrate this, I encapsulated the divs within a wrapper:
.wrapper {
margin: 0;
padding: 0;
height: 120px;
width: 500px;
}
div {
display:inline-block;
height:100px;
width:25px;
border:1px solid black;
}
.left{
vertical-align: top;
}
.center{
}
.right{
vertical-align: middle;
}
<div class="wrapper">
sddsfsdfdsfdsfdsfdsfdsfdsfdsaa
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
This clearly illustrates how the right div, with vertical align: middle, is positioned in relation to the lowercase letters.
Moving on to the second example:
.wrapper {
margin: 0;
padding: 0;
height: 120px;
width: 500px;
}
div {
display:inline-block;
height:100px;
width:25px;
border:1px solid black;
}
.left{
vertical-align: top;
}
.center{
vertical-align: bottom;
}
.right{
vertical-align: middle;
}
<div class="wrapper">
test test test test test
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
In this case, everything follows the expected rules - the items are aligned based on the baseline, and the middle aligns with the letters of the parent container.
For more in-depth information about this behavior, you can refer to this resource