JSFiddle - React, Tailwind, and code Playground

by tommarshall

HTML

<div class="block">
    <div class="centered">
        <p>Hello this is some content</p>
    </div>
</div>

<div class="block" style="margin-top: 10px;">
    <div class="centered">
        <p>Hello this is some content</p>
        <p>This is another line of content</p>
        <p>This a third line of content</p>
    </div>
</div>

CSS

.block {
  text-align: center;
  background: red;
  height: 100px;
}
 
/* 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
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  background: green;
}

JavaScript

// http://css-tricks.com/centering-in-the-unknown/