How to TRULY vertically center text with flexbox?

So vertically centering text seemed simple enough with justify-content and align-items center but when I looked closely I can see that the text isn't truly centered. It has less spacing at the top of the character. I tried to investigate further by searching online and I found this https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align but there must be a simpler solution to this.

Example https://jsfiddle.net/z7cy487o/

html,
body {
  height: 100%;
}

.box {
  height: 10%;
  width: 400px;
  background: #000;
  font-size: 11vh;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;     /* align vertical */
}

<div class="box">
  C
</div>