table float flex grid居中

.container {
	display: grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows:1fr 1fr;
	grid-gap:3px;
	height:100%;
}
.items {background:lightblue;}
/*******************************************/
.container .grid {
	display: grid;
	justify-items:center;
	align-items:center;
}
.container .grid .grid_items {
	background:lightyellow;
}
/*******************************************/
.container .flex {
	display: flex;
	justify-content:center;
	align-items:center;
}
.container .flex .flex_items {
	background:lightgreen;
}
/*******************************************/
.container .float {
	display: float;
}
.container .float .float_items {
	background:#c3ade6;
	display: float;
}
/*******************************************/
.container .table table {
	width:100%;
	height:100%;
	background:lightgray;
}
.container .table .table_items {
	background:lightgreen;
	display:inline;
}

<div class="container">
	<div class="grid items">
		<div class="grid_items">grid layout</div>
	</div>
	<div class="flex items">
		<div class="flex_items">flex layout</div>
	</div>
	<div class="table items">
		<table>
			<tr valign="middle"><td align="center"><div class="table_items">table layout</div></tr></tr>
		</table>
	</div>
</div>

float已迷路^_<