.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已迷路^_<