另类垂直居中

块级元素垂直居中，常见的方式一般是——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
 
回归垂直居中的问题
当父级元素大小有定义时，我们让四个方向都为0，充满整个包含块。但是子元素就那么大，装不满啊。这时我们可以用margin： auto；充满包含块；居中的问题交给margin：auto；由浏览器自己计算。保证同一方向上，两侧的margin （子元素内容区到包含块距离）是相等的。
 
兼容性问题：

在各个浏览器上测试发现IE8+(包括IE8) 就可以实现垂直居中。
 
总结：
这个方法的好处是可以单独设置水平居中或垂直居中；由于不依赖子元素大小，当子元素大小不固定时，不用动态设置margin-top 负边距；而且免去了绝对定位后水平居中不能直接margin ： Xpx auto；的麻烦。如果网站只对应到IE8或移动端页面，这种垂直居中，不妨是一种新的选择。
 

 

posted on 2016-03-13 18:33  前端—郭瑞  阅读(206)  评论(0)  编辑  收藏  举报

导航