CSS头尾固定中间滚动是一个常见的网站设计需求，它能够帮助网站在保持顶部和底部固定的同时让内容部分可以滚动。这样的设计在提升用户体验的同时，也提高了页面的可用性和易用性。

html,body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
display: table;
}
.header, .footer {
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
display: table-row;
}
.content {
height: 100%;
display: table-row;
overflow: auto;
}

上述CSS代码可以帮助我们实现头尾固定中间滚动的布局。我们使用display: table和display: table-row属性来创建一个table-like布局，也是我们实现这种布局的关键。header和footer部分采用display: table-row来固定在页面的顶部和底部，中间的content部分采用display: table-row和overflow: auto来实现内容部分可以滚动。

值得注意的是，我们需要给html和body设置height: 100%来确保布局的高度和浏览器窗口高度一致，还需要给.container元素设置height: 100%来让它占据整个浏览器窗口高度。这样我们就可以实现一个完美的头尾固定中间滚动布局了。