转载

水平、垂直居中布局方案整理

讨论前提

本文都是基于这样的HTML结构来进行讨论的:

<div class="parent">     <div class="child">DEMO</div> </div>

水平居中

inline-block:inline-block + text-align

    .parent{         text-align: center;     }     .child{         display: inline-block;     }

inline-block 是个很特殊的属性,既有 inline 文本的特性,又有 block 布局的特性;因此,用上 inline-block ,既可以让div像文本一样居中( text-align: center; ),又不会影响div本身的宽高。

这个方案有个缺陷,就是由于在parent上设置了 text-align: center ,因此child里的元素都会继承这个 text-align: center ,需要重新设置个 text-align: left 来reset一下。

display: table/block + margin

这种方法非常常用,适用于需要用 position:static 把盒子撑起来的情况下的水平居中。但值得注意的是,使用 block 的话,child的默认宽度会撑满整个parent,因此需要显式地定义其 width ;而使用 table 的话,其默认宽度为child的内容宽度,这样一来,即使加上padding和border,也能顺利实现水平居中,在实际场景中是比 block 要好用的。

.child{     display: table; //display: block;     margin: 0 auto; } 

垂直居中

表格单元特性(table-cell):table-cell + vertical-align

.parent{     display: table-cell;     vertical-align: middle; }

这个方案可能有一点费解,毕竟 表格布局 已经是上世纪的布局方式了,但当时布局所用到的一些特性,还一直被浏览器兼容着,其中就包括这个 table-cell 的方案。

从某种意义上来看,跟 inline-block方案 很相像,都是利用了文本排版的特性,但差别在于,本方案并不需要把child设置为inline-block也可生效。

水平、垂直同时居中

负值的margin:absolute + margin

这种方法也比较常用,先利用 positions: absolute;left: 50% 的特性,使child的左侧移至parent的水平中央处,然后再施以负的 margin-left 使child水平左移child宽度的一半距离,即最终使child的水平中央与parent的水平中央重合;在垂直方向上,也是一样的原理。

这个方法用起来不复杂,原理也很容易理解,但是缺点也非常明显:

  • 要求child的宽度必须是固定的,而这在如今响应式布局横行的时代,似乎是有点过时了。

  • parent设置relative关系倒不大,但是child变absolute就脱离文档流了。

    .parent {     position: relative; }  .child {     width: 200px;     height: 200px;     position: absolute;     top: 50%;     left: 50%;     margin-left: -100px;    //为width的一半,且为负值     margin-top: -100px;    //为height的一半,且为负值 } 

负margin的替代方案:absolute + transform

从上文可知,负margin方案的问题在于要确定width和height,无法做到自适应;于是,为了要做到自适应,我们可以把负margin换成transform实现child自身的偏移。

.parent{     position: relative; } .child{     position: absolute;     left: 50%;     top: 50%;     transform: translate(-50%,-50%); } 

由于transform这一属性在设置百分比类型的值时,其参照对象是自身,因此只需要各设置50%,就能实现往水平方向偏移自身宽度的一半,又或者是往垂直方向偏移自身高度的一半。总体来说,这个方案灵活是够灵活的了,但是transform的兼容性堪忧,移动端还好说,PC端怎么敢用?

flex + justify-content + align-items

跟上文的transform方案想必,flex(弹性盒子)的方案兼容性就更令人担忧了,PC端不要闹了,连移动端要兼容起来也很麻烦,基本上是只能使用 老版的弹性盒子 了。

.parent{     display: flex;     justify-content: center;    //水平居中,相当于text-align     align-items: center;    //垂直居中,相当于vertical-align } 

文本式终极居中: inline-block + text-align + table-cell + vertical-align

.parent{     text-align: center;     display: table-cell;     vertical-align: middle; } .child{     display: inline-block; }

很容易便能看出,这其实是 inline-block水平居中 方案以及 table-cell垂直居中 方案的合用,也算是把文本排版的特性都利用了个遍了。

原文  https://segmentfault.com/a/1190000004420173
正文到此结束
Loading...