Html 如何将视图集中在包装器的中间？

我想知道如何显示比任何设备的视口都大的包装器的中间部分（例如，这里是移动电话），同时也使其在x和y上可滚动

我试过这个：

<div class="wrapper">
    <div class="quarter first">
        <div class="theme">1</div>
    </div>
    <div class="quarter second">
        <div class="theme">2</div>
    </div>
    <div class="quarter third">
        <div class="theme">3</div>
    </div>
    <div class="quarter fourth">
        <div class="theme">4</div>
    </div>
</div>

我知道这些值毫无意义，但我只是想看看左上部分是否可以滚动。事实并非如此

然后我用背景位置尝试了一个技巧，但是每个季度的内容都不会正确显示

.wrapper {width: 200vw;
    height: 100vh;
    position: fixed;
    overflow: scroll;
}

.quarter {width: calc(100% / 2);
    height: calc(100% / 2);
    float: left;
    position: absolute;
    overflow: scroll;
}

.first {background-color: aqua;
    top: 0;
    left: 0;
    background: -50%;
}

.second {background-color: yellow;
    top: 0;
    right: 0;
}

.third {background-color: greenyellow;
    bottom: 0;
    left: 0;
}

.fourth {background-color: rosybrown;
    bottom: 0;
    right: 0;
}

---

谢谢你的回答我不明白你期待什么？对不起，我真的不知道怎么解释。。。我有一个包装，例如200视图宽度。第一季度占了一半，100vw。因此，它将显示在设备的所有宽度上。但是在屏幕上，我想看到第一节的一半，第二节的一半，其他部分可以滚动。我希望我能解释得更清楚一点……但是如果你的第一季度设定为100vw，你不能只显示一半？也许你有一个网站的例子

.wrapper {width: 200vw;
    height: 100vh;
    position: fixed;
    overflow: scroll;
}

.quarter {width: calc(100% / 2);
    height: calc(100% / 2);
    float: left;
    position: absolute;
    overflow: scroll;
}

.first {background-color: aqua;
    top: 0;
    left: 0;
    background: -50%;
}

.second {background-color: yellow;
    top: 0;
    right: 0;
}

.third {background-color: greenyellow;
    bottom: 0;
    left: 0;
}

.fourth {background-color: rosybrown;
    bottom: 0;
    right: 0;
}