html：

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

1：使用定位實(shí)現(xiàn)：

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">里邊一定要有內(nèi)容，因?yàn)閐isplay: table-row;相當(dāng)于<div class="top">轉(zhuǎn)換為了<tr>標(biāo)簽，所以tr標(biāo)簽里是需要有內(nèi)容的

參考：