一. 已经元素的宽高的前提下：
(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.上中下盒子如果没有设置固定高宽，浮动或定位，自然会随浏览器的变化而变化。
有什么问题可以继续问。
你错了，你中间的div其实只是占领了一行，并不是宽度和其他两个一样，你分别非三个div定义一个背景颜色，你就知道他们的宽度是不一样了，之所以中间的宽度只有1px也会占领一行的关系，是因为div和p标签一样，都是类模块，他们的属性display=block当设置成display=inline-block的时候，他们几个居然在一行显示了
