JSFiddle - React, Tailwind, and code Playground

by thindery

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row middle-content">
    <div class="col-xs-8">
      We have content in here.
    </div>
  </div>
</div>

CSS

/** vertically center content **/

.row {
  background-color: lightblue;
}

.row.middle-content {
  position: relative;
  min-height: 392px;
}

.row > div {
  background-color: teal;
}

.row.middle-content > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}