Span element won't get vertically centered inside div

Question

Why isn't this enough to vertically center a span inside a div?

div {  
  border: 1px solid blue;
  padding: 0;
}
.bigFont {
  font-size: 200px;
}
.toBeVerticallyCentered {
  display: inline-block;
  vertical-align: center;
}

<div>
  <span class="bigFont">A</span>
  <span class="toBeVerticallyCentered">B</span>
</div>

Thanks in advance.