块级元素垂直居中，常见的方式一般是——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）的左内壁。换句话说就是绝对定位是相对于包含块定位。未指明定位距离的，按父级内容区边缘（左、上）。
当相反方向同时设置值时，优先（左、上）。
第三个问题——包含块怎么找
简单来说，确定一个元素的containing block，由position属性确定：
1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
2. absolute: 向上找最近的定位为absolute/relative的元素
3. fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block
回归垂直居中的问题
兼容性问题：
在各个浏览器上测试发现IE8+(包括IE8) 就可以实现垂直居中。
总结：
这个方法的好处是可以单独设置水平居中或垂直居中；由于不依赖子元素大小，当子元素大小不固定时，不用动态设置margin-top 负边距；而且免去了绝对定位后水平居中不能直接margin ： Xpx auto；的麻烦。如果网站只对应到IE8或移动端页面，这种垂直居中，不妨是一种新的选择。
