html：
1：使用定位实现：
css：
.top-center-bottom>div{
position:absolute;
}
.top-center-bottom .top{
top:0;
height:100px;
width:100%;
background:red;
}
.top-center-bottom .bottom{
bottom:0;
height:100px;
width:100%;
background:red;
}
.top-center-bottom .center{
bottom:100px;
top:100px;
width:100%;
background:green;
}
2：使用flexbox：
css：
html, body, .top-center-bottom{
height:100%;
}
.top-center-bottom{
display:flex;
flex-direction:column;
}
.top-center-bottom .top{
height:100px;
background:red;
}
.top-center-bottom .bottom{
height:100px;
background:red;
}
.top-center-bottom .center{
flex:1;
background:green;
}
3：使用grid
css：
.html, body, .top-center-bottom{
width:100%;
height:100%;
}
.top-center-bottom{
display:grid;
grid-template-rows:100px auto 100px;
grid-template-columns:100%
}
.top-center-top{
background:red;
}
top-center-bottom{
background:red;
}
top-center-center{
background:green;
}
4：使用css table布局
html：
css：
html,body, .top-center-bottom{
height:100%;
width: 100%;
}
.top-center-bottom{
display:table;
}
.top-center-bottom>div{
display: table-row;
}
.top-center-bottom .top{
height: 100px;
background: red;
}
.top-center-bottom .bottom{
height: 100px;
background: red;
}
.top-center-bottom .center{
background: green;
}
注意：
参考：
