一. 已经元素的宽高的前提下：
(1) left:50%top:50%
父元素设置相对定位，position: relative
子元素(要居中的元素)设置绝对定位，position: absolute left: 50% top: 50%
（2）设置margin: auto
父元素设置相对定位,position: relative
子元素(要居中的元素)设置绝对定位，position: absolutemargin: auto
(3) flex布局
父元素设置 display: flex justify-content: center align-items: center
二.未知元素宽高的情况下：
（1）四个方向设置值，把元素撑开
父元素设置相对定位，position: relative
子元素设置绝对定位，position: absolutetop与bottom设置一样的值，left与right设置一样的值，把容器撑开
？我奇怪了，div为块级元素，middle一定在foot的上方。你可以在middle内填写内容,height:100%
宽度不用设定，内容自然会随middle宽度变化而变化。
还有z-index:0这个需要设定吗？
定位要改下relative，是相对于原本(自身,标准流时的位置为基准)的，而且移动后，原本的又暂位置。这里要改为margin-top.
clear:both这个是消除float用的。用在这里干什么？
去掉relative,z-index.上中下盒子如果没有设置固定高宽，浮动或定位，自然会随浏览器的变化而变化。
有什么问题可以继续问。
