JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<span class="block" style="height: 300px;">
    
    <span class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </span>
    
    <!--[if lte IE 7]>
        <span class="ie7-fix-centered"></span>
    <![endif]-->
    
</span>

<span class="block" style="height: 200px;">
    
    <span class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </span>
    
    <!--[if lte IE 7]>
        <span class="ie7-fix-centered"></span>
    <![endif]-->
    
</span>

<span class="block" style="height: 600px;">
    
    <span class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </span>
    
    <!--[if lte IE 7]>
        <span class="ie7-fix-centered"></span>
    <![endif]-->
    
</span>

CSS

.block {
  display:block;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}
 
.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
    
  /* For visualization 
  background: #808080; width: 5px;
  */
 }

.ie7-fix-centered {
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
 }