JSFiddle - React, Tailwind, and code Playground

by [Twiner]

HTML

<div class="container">
    <div class="helper">
      <div class="content">
        <p>I'm centered like a boss!</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
        <p>...</p>
      </div>
    </div>
  </div>

CSS

/*o.v.
  big shout out to http://www.jakpsatweb.cz/css/css-vertical-center-solution.html */

.container {display: table; height: 100%; position:absolute; overflow: hidden;width:100%;}
.helper {#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;}
.content {#position: relative; /* top: -50%; */margin:0 auto;width:200px;border:1px solid orange;}