CODEWITHSUNDEEP
htmlcss
Najaaz
Najaaz

Reputation: 390

How to vertically center a horizontal scrolling div

I am trying to have a horizontal scrolling page and want the scroll to be 75% of my viewport and vertically aligned. But for some reason the div doesn't get aligned vertically. I tried doing margin left, right, top and bottom but resulted in my code acting unexpectedly. Even I tried using "display flex" but didn't work at all.

<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>

and my CSS file...

.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;
}

The output of my code

It would be greatly helpful if someone can help me with this! Thanks

Upvotes: 2

Views: 49

Answers (1)

Tanner Dolby
Tanner Dolby

Reputation: 4421

Try this out. I gave the .wrapper container a height of 100vh and aligned the flexbox along both axes.

.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>

Upvotes: 1

Related Questions