音乐

  1. Fields Of Gold - Sting
  2. Beautiful Girl - INXS
  3. Take Me To Church - Hozier
  4. Stephanie Says - Lady & Bird
  5. All of Me - John Legend
  6. 一丝不挂 - 陈奕迅
PHPTalk2.0 新版全新上线,欢迎体验

CSS垂直居中解决方案


问题场景

应用的地方比较普遍,这里有一个赤裸裸的栗子:

021952400308952

也有很多流行的方案,这里只针对各种方案的适用场景来做一些分析

问题抽象

其实,垂直居中问题可以简化成这样:一个容器HTML元素(#container),一个需要居中的HTML元素(#center)。特殊的情形下可能会出现body为#container,#center是图片,此处不予讨论。 #center 可能有高度,也可能没有,也可能是响应式的。总之,代码的结构如下图所示:

021953058581762

再有就是浏览器的兼容性问题:IE6,IE7.....不说了,都是泪。总之,我们要做的就是在相应的代码处填入代码以期达到下图目的。:

021953342175897

方案一:负外边距(Negative Margins)

这种方案应该是最流行的,思路也比较简单,浏览器的兼容性(IE6+)也比较好,但是必须要指定#center的高度,也无法进行响应式处理(类似height:60%,max-width:400px;)

021954013731436

如果能确定#center高度,并且无需响应式,这种方案是最棒的!

方案二:绝对定位居中(Absolute Centering)

021954109365313

该方法兼容IE8+,虽然可以自适应,虽然padding可以不用操心,但是还是必须声明高度!关于这种方案的工作原理:

  • 在普通内容流(normal content flow)中,margin:auto的效果等同于margin-top:0;margin-bottom:0。
  • position:absolute使绝对定位块跳出了内容流,内容流中的其余部分渲染时绝对定位部分不进行渲染。
  • 为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框,此时该块block将填充其父元素的所有可用空间,父元素一般为body或者声明为position:relative;的容器。
  • 给内容块设置一个高度height或宽度width,能够防止内容块占据所有的可用空间,促使浏览器根据新的边界框重新计算margin:auto
  • 由于内容块被绝对定位,脱离了正常的内容流,浏览器会给margin-top,margin-bottom相同的值,使元素块在先前定义的边界内居中。
  • 总之:绝对定位元素不在普通内容流中渲染,因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。

方案三:变形(Transforms)

这种方案是方案一的一种延伸,它解决了方案一必须指定高度,不支持响应式的问题,但是浏览器兼容性不佳,只支持IE9+,但是在移动版的浏览器却可以放心的使用哦!

021954278589643

另外,这种方案可能需要在transform上加入前缀,不过如果有less和sass这样的东西就好多了,瞬间,又有了对IE的鄙视!

方案四:表格单元格(table-cell)

思路是这样的:

I am Centered
,代码是这样的:

021954492649969

  • 1.需要木有语义的多余的标签嵌套
  • 2.兼容IE8+
  • 3.可能在一些浏览器上有问题(特别是IE)

由于兼容上的一些问题,这个方案,不太建议。

方案五:行内块元素(inline-block)

思路为:期望在#container中:text-align:center;,在#center中:vertical-align:middle;达到目的,但是#center却无法撑开#container,咋办呢? 可以在#container里面加入一个多余的display为inline-block的div(作为#container的一个child),将#container的高度撑开,就像这样:

021955127338167

如果支持:before或者:after的浏览器,就可以高大山一些:

021955255615214

但是,还存在如下两个问题:

  • 由于两个inline-block的元素之间默认是有间隙的,所以需要在#center中margin-right为负值或者在#container中font-size:0px;(如果#center为图片的情况下)进行调整
  • #center的宽度不能大于#container的100%-间隙,否则before将会被挤走

方案六:Flexbox

这个应该是最简单的,如下:

021956087951039

原理为:margin:auto;自动获取伸缩容器中剩余的空间,设置垂直方向margin值为auto,可以使伸缩项目在伸缩容器的两上轴方向都完全集中。我觉得,实际上相当于这样:

021956218896772

关于Flexbox,请参见这里

但是flex的缺点也是显而易见的,不支持老旧的浏览器。

参考

  • http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
  • http://www.w3cplus.com/css3/a-guide-to-flexbox.html
  • http://www.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
  • http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/
  • http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
  • http://www.zhangxinxu.com/wordpress/2009/08/大小不固定的图片、多行文字的水平垂直居中
  • http://designshack.net/articles/css/how-to-center-anything-with-css
  • http://css-tricks.com/centering-in-the-unknown/
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform