JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer"> <!-- 父容器 -->
			<div class="inner"> <!-- 子容器 -->
				... <!-- 子容器内部内容 -->
			</div>
			<!-- 父容器内其他的子元素 -->
		</div>

CSS

body, html { height: 100%; padding: 0; margin: 0 ; }
.outer { display:table-cell; height:100%; width: 100%; vertical-align: middle; background: #f1efa5; }
.inner { height:20%; vertical-align: middle; background: #60b99a; }