JSFiddle - React, Tailwind, and code Playground

Test vertical alignment of a container within a container, using display:table-cell

by Ram Tobolski

HTML

<div class=box> 
<span>foo</span> 
</div> 
<br/> <br/>
<div class=box2>
    <span>foo</span>
</div>

CSS

.box { height: 5em; width: 10em; border: solid; 
   display: table-cell; 
   vertical-align: middle; text-align: center; } 
.box > span {  border: solid; } 

.box2 { width: 10em; border: solid;     } 
.box2 > span { padding: 10px 20px; border: solid; }