JSFiddle - React, Tailwind, and code Playground

HTML

<div id="background">
  <div id="box">
  <ol>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  <li>asdf asdf asdf</li>
  </ol>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0px;
}
#background {
  display: flex;
  align-items: center;
  height: 100%;
}
#box {
  background-color: yellow;
  margin: 0 auto;
  width: 200px;
}