如何在没有父级的页面上居中放置容器？我不想为父级设置特定高度 [重复]

问：

我想将一个由两张卡片组成的容器居中。我对这些卡片的设计没有问题，但我不知道如何将容器直接放在页面中间的中心。我将组件的高度指定为 100vh，它起作用了。但是，当我尝试为容器添加框阴影时，它没有按我想要的方式显示（它显示在页面底部，而不仅仅是容器下方）。<main>

这是我缩短的html：

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

还有我的css：

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

当我不指定高度时，它是水平居中的，但不是垂直的。

感谢您的帮助，它真的会帮助我，因为我在其他任何地方都找不到解决方案。