JSFiddle - React, Tailwind, and code Playground

HTML

<div style="min-width:100%;" class="header-overlay container">
	  
<div class="row h-100 text-center">
    <div class="col-sm-12 h-100 d-table">
        <div class="d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

	</div>

CSS

html, body {
  height: 100%;
}

.action {min-height:600px; height:100%;}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%; width:100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 100%;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}