JSFiddle - React, Tailwind, and code Playground

by Andrew Holloway

HTML

<!-- Centering a DIV using `display: table` and `display: table-cell` -->
<div class="outer"><div class="inner"><div class="content">what</div></div></div>

CSS

body, html {
  height: 100%;
  margin: 0;
  background-color: red;
}

.outer {
  display: table;
  width: 100%;
  height: 100%;
}

.inner {
  display: table-cell;
  vertical-align: middle;
}

.content {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  background-color: white;
}