JSFiddle - React, Tailwind, and code Playground

by GolezTrol

HTML

<section>
 <div class="container">
  <div class="options">
    <h2>My question</h2>
    <ul>
      <li>Ligula Quam</li>
      <li>Condimentum Nullam Mollis</li>
      <li>Aenean</li>
      <li>Commodo Dolor Nibh Ligula Vulputate</li>
    </ul>
  </div>
 </div>
</section>

CSS

section {
  width: 500px;
  height: 300px;
  background: red;
  display: table; 
  #position: relative; 
  overflow: hidden;
}
.container {
  #position: absolute; 
  #top: 50%;
  display: table-cell; 
  vertical-align: middle;
}
.options {
  #position: relative; 
  #top: -50%;
  margin: 0 auto;
  background: blue;
  display: table;
}
h2 {
  text-align: center;
  margin: 0;
  padding: 0;
}
ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  text-align: left;
}