Why doesn't "margin: auto" work on a block element?

Question

I inserted a div parent element spanning 100vh and 100vw of the screen. I added a child element, which was a div by default, and added "margin: auto 0" in an effort to center it vertically. However, it failed to center although it was clearly a block element.

.header {
  height: 100vh;
  width: 100vw;
}

.banner {
  margin: auto 0;
  display: block;
  background-color: blue;
  text-align: center;
}

<header class="header">
  <div class="banner">
    <h1>center me</h1>
  </div>
</header>

Thank you very much in advance.