css - 居中可扩展div

Question

div必须远离屏幕，并以固定的宽高比保持在中央。在我的代码中，我使用了2个媒体查询，并且有些消息告诉我我做的工作太多，但是看不到任何其他解决方案。
也就是说，我问：

有没有更简单/更好的方法来达到相同的结果？

PS：颜色只是用来显示行为而已，不需要。

body {
  overflow: hidden;
  background: #ccc;
}

.container {
  width: 96vmin; height: 74vmin;  
  margin: calc(50vh - 36vmin) auto;
  background-color: lightblue; 
  box-shadow: inset 0 0 20vmin slateblue;
  transition: all 0.2s;
}

@media (min-width: 96vmin)
   and (orientation: landscape) {
  .container {
    background: yellow;
    box-shadow: inset 0 0 20vmin orangered;
    width: 96vmax; height: 74vmax;  
    margin: calc(50vh - 36vmax) auto;
  }
}

@media (min-width: 130vmin) 
   and (orientation: landscape) {
   .container {
     background: tomato;
     box-shadow: inset 0 0 20vmin darkred;
     margin: 1vmin auto;
     width: 130vmin; height: 98vmin;  
   }
}

<div class="container"></div>

Answer 1

简单的解决方案是：使用CSS单位vmin

https://css-tricks.com/simple-little-use-case-vmin/