JSFiddle - React, Tailwind, and code Playground

by justincook

HTML

<div class="block wrapper">
    <div class="centered">    
      <div class="block">
          <div class="centered">Centered Content</div>
      </div>
  </div>
</div>

CSS

/* Can be any width and height */
.block {
  height:300px;
  width:300px;
  text-align: center;
  background:#ccc;
  margin:0 auto;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */ 
.centered {
  display: inline-block;
  vertical-align: middle;         
}

.wrapper{
    background:#888;
    width:500px;
    height:500px;
}