JSFiddle - React, Tailwind, and code Playground

by Humphry Huang

HTML

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

CSS

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