JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header" style="fixed; height: 200px; background-color: orange; top:0">xxx</div>
<div class="content">I am vertically centered between the orange and the gray, or maybe not...yet.</div>
<div id="footer" style="position: fixed; height: 50px; bottom: 0px; background-color: gray; ">yyy</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding;
    0;
}
div {
    width: 100%;
}
div.content {
    position: fixed;
    background-color: red;
    top:200px;
    bottom:50px;
    margin:auto;
    height: 200px;
}