JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header" style="position: fixed; height: 200px; background-color: orange;"></div>
<div class="viewport">
    <div class="page">
        <div class="content">Vertically Aligned Section 1</div>
    </div>
    <div class="page">
        <div class="content">Vertically Aligned Section 2</div>
    </div>
</div>
<div id="footer" style="position: fixed; height: 50px; bottom: 0px; background-color: gray;"></div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
div {
    width: 100%;
}
div.content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background-color: red;
    height: 200px;
    width: 50%;
    margin: 0 auto;
}
div.viewport {
    width: 100%;
    height: 100%;
    background-color: #330000;
    overflow: hidden;
}
div.page {
    width: 100%;
    height: 100%;
}