JSFiddle - React, Tailwind, and code Playground

HTML

<div id="c1">
  <div id="c2">
    <div id="d1">d1</div>
    <div id="d2">d2</div>
  </div>
</div>

CSS

#c1{
    display:table-cell;
    border:red solid 1px;
    width:600px;
    height:300px;
     vertical-align:middle;
    text-align:center
}
#c2{
    border:green solid 1px;
    width:300px;
    margin:0 auto
   
}