Как вертикально центрировать div с горизонтальной прокруткой

Question

Я пытаюсь создать страницу с горизонтальной прокруткой и хочу, чтобы прокрутка занимала 75% моего окна просмотра и выровнялась по вертикали. Но по какой-то причине div не выравнивается по вертикали. Я пробовал делать поля слева, справа, сверху и снизу, но в результате мой код работал неожиданно. Даже я пробовал использовать "display flex", но вообще не работал.

<div class="main_background">
<div class="wrapper">
    <div class="slide one"></div>
    <div class="slide two"></div>
    <div class="slide three"></div>
    <div class="slide four"></div>
</div>
</div>

и мой CSS файл ...

.slide{
    width: 100vw;
    height: 80vh;
}
.wrapper{
    display: flex;
    flex-direction: row;
    width: 300vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin:top left;
    margin-top: 90px;
}
.one{
    background-color: orchid;
}
.two{
    background-color: orangered;
}
.three{
    background-color: pink;
}
.four{
    background-color: green;
}
.main_background{
    width: 100vh;
    height: 100vw;
    background-image: linear-gradient(green, greenyellow);
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin:top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
}
     

Вывод моего кода

Было бы очень полезно, если бы кто-нибудь мог мне с этим помочь! Спасибо

Answer 1

Попробуйте это. Я установил контейнер .wrapper на высоту 100vh и выровнял flexbox по обеим осям.

.slide {
    width: 100vw;
    height: 80vh;
}
.wrapper {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 300vw;
    transform: rotate(90deg) translateY(-100vh);
    transform-origin:top left;
    margin-top: 90px;
}
.one {
    background-color: orchid;
}
.two {
    background-color: orangered;
}
.three {
    background-color: pink;
}
.four {
    background-color: green;
}
.main_background {
    width: 100vh;
    height: 100vw;
    background-image: linear-gradient(green, greenyellow);
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin:top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
}

<div class="main_background">
  <div class="wrapper">
      <div class="slide one"></div>
      <div class="slide two"></div>
      <div class="slide three"></div>
      <div class="slide four"></div>
  </div>
</div>