JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent-fix">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

CSS

/* .parent的table-cell 是不支持设置 width: 100%; 想让 .parent 和 其容器宽度一致最好设置一个 dispaly: table; 父容器。*/
.parent-fix {
    display: table;
    width: 100%;
}
.parent {
    height: 500px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: red;
}
.child {
    display: inline-block;
    background: yellow;
    height: 200px;
    width: 200px;
}