Vertically center content of flex item in flex container

Question

I want to set the "Hi" text vertically in the middle of the div, not horizontally and the a element must be the same size as the div element. I tried vertical-align: middle; but it does not work. I could add a padding calculating the value in order to be the text centered but that is just a workaround. How can I achieve it?

#main {
  width: 400px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

#main a {
  height: 100%;
}

<div id="main">
  <a style="background-color:coral;">Hi</a>
</div>

https://codepen.io/thenr/pen/vYEpKyo