块级元素垂直居中，常见的方式一般是——1、表格居中；或2、top：50%加自身一半大小的负边距。今天我分享一个另类的垂直居中方式。
另类方式——四向为0
没错，如字面的意思就是将元素绝对定位后，top、right、bottom、left都设置为0。
我们直接上代码：
HTML：
1 <body> 2 <div class="content"></div> 3 </body>
CSS：
1 html,body { 2 width: 100%; 3 height: 100%; 4 margin: 0; 5 padding: 0; 6 } 7 8 body { 9 position: relative; 10 } 11 .content { 12 width: 300px; 13 height: 300px; 14 background: #666; 15 /*以下和垂直居中相关*/ 16 position: absolute; 17 margin: auto; 18 top: 0; 19 left: 0; 20 right: 0; 21 bottom: 0; 22 }
效果如下：
我们看到灰色的方块在页面中居中显示，那么我们来看看为什么这种方法能够让块级元素居中显示呢？
我们使用的是绝对布局，平时我们一般在top、right、bottom、left挑一对正交的属性作为绝对坐标。但是这一次我都设置成0，并且margin：auto；（这个必须有）。
竟然能居中。
首先我们要了解绝对定位中top、right、bottom、left设定的数值是针对谁。很对人会回答，相对于父级中最近一个非static的，或指导body。但我想问的是，假如我对父级设定为relative后，top等属性的值是具体指哪里到哪里？比如父级元素有padding，这时的top值该何去何从呢？top值写0会怎样，不写会怎样，写auto会怎样。
我在相对定位的元素和绝对定位的元素中间加入了一个带有padding：10px；的块级元素。
html：
1 <section class="demo demorel"> 2 <div class="floatele"> 3 <div class="inbox2"></div> 4 </div> 5 </section>
css:
1 .inbox2 { 2 background: #6c4ecd; 3 width: 50px; 4 height: 50px; 5 position: absolute; 6 } 7 .floatele { 8 9 width: 300px; 10 height:50px; 11 background: tomato; 12 padding: 10px; 13 } 14 .demorel { 15 position: relative; 16 }
第一个问题：我们没有设定方向值，top等属性都是默认值，那么默认值是多少？是0吗？是auto吗？
我们在浏览器调试工具中分别将top设为0 和 auto
top：0； 
top：auto；
看来四个方向属性的默认值不是0；说明常规情况下我们还是要将一对正交属性填写上。
第二个问题，相对谁定位
我给相对定位的父级加上padding： 20px； 绝对定位的top：0；
效果如右图：
到这里真想慢慢浮出水面了—— 当top：0 直接顶到了包含块（containing block ——简单说就是它的父元素的内容框，即去掉padding的部分）的内部上边缘。left 没有设置，绝对定位的子元素水平位置有直接父元素内容区（content）的左内壁。换句话说就是绝对定位是相对于包含块定位。未指明定位距离的，按父级内容区边缘（左、上）。
当相反方向同时设置值时，优先（左、上）。
第三个问题——包含块怎么找
1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
2. absolute: 向上找最近的定位为absolute/relative的元素
3. fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block
在各个浏览器上测试发现IE8+(包括IE8) 就可以实现垂直居中。