用flex实现上下固定高度，中间自适应的页面布局

css样式：

html,body{height:100%;margin: 0;padding: 0;}

.flex-container{height: 100%;display: flex;flex-direction: column;text-align: center;}

.flex-item:nth-child(1),.flex-item:nth-child(3){flex-grow: 0;flex-shrink: 0;background-color: #ababab;}

.flex-item:nth-child(2){flex-grow: 1;flex-shrink: 1;background-color: #000;overflow-y: auto;}

.center{position: fixed;top: 50%;left: 50%;margin-top: -10px;margin-left: -24px;}

html结构：

完整页面代码：

浏览器效果：

改变中间内容的高度后html：

浏览器效果：(滚动条自动消失)

改变可视区域大小后效果：