让div盒子处于页面的正中间（处于body元素的正中间）

我发现效果是可以的，但是一旦分辨率不一样，就会效果偏下（请问怎么弄）谢谢！

position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

body {
        width: 100vw;
        height: 100vh;
        position: relative;
      }
      div {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 100px;
        margin-top: -50px;
        margin-left: -50px;
      }

width: calc(100vh);
height: calc(100vh);

如果body里只有这一个盒子的话，body{width:100vw;height:100vh;display:flex;justify-content:center;align-items: center;}