How to center a container on the page with no parent? I don't want to set a specific height for the parent

Question

I want to center a container which consists of two cards. I have no problem with the design of those cards, but I have no idea how to center the container directly in the middle of the page. I specified the height of the <main> component to 100vh and it worked. However, when I tried to add a box shadow for the container it wasn't shown as I wanted to (it was shown at the bottom of the page, instead of just beneath the container).

Here's my shortened html:

<main>
  <div class="container">
   <div class="card1"></div>
   <div class="card2"></div>
  </div>
 </main>

And my css:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: ?;
}

when I don't specify the height, it is horizontaly centered, but verticaly not.

Thanks for the help, it will really help me, as I couldn't find the solution anywhere else.