html：

<div class="top-center-bottom">
        <div class="top"></div>
        <div class="center"></div>
        <div class="bottom"></div>
</div>

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：

<div class="top-center-bottom">
        <div class="top"><div></div></div>
        <div class="center"><div></div></div>
        <div class="bottom"><div></div></div>
</div>

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;
    } 

注意：

<div class="top">里边一定要有内容，因为display: table-row;相当于<div class="top">转换为了<tr>标签，所以tr标签里是需要有内容的

参考：