The Ultimate Mix Of Beauty and Usability

or

Centered content with vertical scrolling on small screens

Click here to see a demonstration, resize your window or use your smartphone landscape/portrait to see the UI suggested

The content we create is consumed on small and big screens, on the case of this article when we have a big screens we want the content be centered on the screen, but often the same content on a small screen height needs scrolling

Imagine a smartphone on portrait and landscape, on portrait it has a bigger height, on landscape it has a smaller height

Lets get started with a simple demonstration html markup for our example


<div class="parent">
  <div class="inner-parent">
    <div class="child-item">Content 1</div>
    <div class="child-item">Content 2</div>
    <div class="child-item">Content 3</div>
    <div class="child-item">Content 4</div>
  </div>
</div>

The parent is going to occupy all the height available on the screen


.parent {
  height: 100vh;
  width: 100vh;
  overflow: auto;
}
      

We overflow because on this case we want to allow the parent to scroll and find the inner-parent content.

The inner-parent element is going to use the property margin: auto which is the magic that helps keep the content centered when on big screens


.inner-parent {
  margin: auto;
}
    

Conclusions

When the parent element uses display flex, the inner-parent element with margin auto is going to center itself vertically and horizontally

We've seen this technique being used on fixed menus on the left or right of the screen, and also on login/signup UIs. other modal forms, but it can be applyed to many purposes just like you want