让元素绝对居中

我们都知道margin:0 auto;的样式可以让元素水平居中，但是margin:auto;却不能让元素垂直居中，只要声明元素高度，并且附加如下样式就可以：

#juzhong{
            margin:auto;
            position:absolute;
            top:0;left:0;bottom:0;right:0;
            background-color: red;
        }

效果如图：

居中.png

1.在普通文档流里，margin:auto;的意思是设置元素的margin-top和margin-bottom的值都为0.
2.设置了position:absolute;的元素会变成块元素脱离普通文档流。而文档的其余部分照常渲染，元素像是不在原来的位置一样。
3.设置了top:0;left:0;bottom:0;right:0;样式的块元素会让浏览器为它包裹一层新的盒子，因此这个元素会填满它相对父元素的内部空间，这个相对父元素可以是body标签，或者一个设置了position:relative样式的容器。
4.给元素设置了高度了之后，浏览器会阻止元素填满所有空间，根据margin:auto;的要求，重新计算，并包裹一层新的盒子。
5.既然块元素是绝对定位的，又脱离了普通文档流，因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。