诚信为本,优质服务,为客户创造价值!
全国服务热线:1354-3636362 新闻资讯 商标注册 400电话 控制面板 付款方式
»您的位置:首页 > 新闻资讯 > 网络技术 > 正文

Flexbox完美解决CSS垂直居中

发布时间:2016-10-1 12:28:40 浏览次数:803

在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用 text-align: center ;如果它是一个块级元素,就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中,可能光是想想就令人头皮发麻了。

多年以来,垂直居中已经成为了CSS领域的圣杯,它同样也是前端开发圈内广为流传的笑话。原因在于它同时具备以下几条特征:



在本篇**中,我们将探索现代CSS的强大威力,以全新的思路去攻克各种场景下的垂直居中难题。请注意,有几种技巧十分流行,但在这里并不会深入探讨,原因如下:



如果你有兴趣,可以去看看Chris Coyier写的《不为人知的居中方法》。这篇出色的文章详细讲述了这两种技巧。


代码初始化


我们基于如下这段HTML代码,将

元素在  元素中垂直居中(实际上我们将要探索的这些技巧是与容器无关的):
1
2     
这是要居中的元素
3

基本样式信息如下:

01 body {
02   margin: 0;
03   padding: 0;
04   background: #4AC291;
05   font-size: 100% / 1.5 sans-serif;
06 }
07 main {
08   background: #655;
09   color: white;
10   text-align: center;
11   line-height: 2em;
12 }


基于绝对定位的解决方案


我们来看一个早期的垂直居中方法,它要求元素具有固定的宽度和高度:

1 main {
2   position: absolute;
3   top: 50%;
4   left: 50%;
5   width: 12em;
6   height: 2em;
7   margin-top: -1em;  /* 2/1 = 1 */
8   margin-left: -6em; /* 12/2 = 6 */
9 }

固定宽高的样式效果

这段代码在本质上做了这样几件事情:先把这个元素的左上角放置在视口(或最近的、具有定位属性的祖先元素)的正中心,然后再利用负外边距把它向左、向上移动(移动距离相当于它自身宽高的一半),从而把元素的正中心放置在视口的正中心。借助强大的 calc() 函数,这段代码还可以省掉两行声明:

1 main {
2   position: absolute;
3   width: 12em;
4   height: 2em;
5   top: calc(50% - 1em);
6   left: calc(50% - 6em);
7 }

显然,这个方法最大的局限在于它要求元素的宽高是固定的。在通常情况下,对那些需要居中的元素来说,其尺寸往往是由其内容来决定的。如果能找到一个属性的百分比值以元素自身的宽高作为解析基准,那我们的难题就迎刃而解了!遗憾的是,对于绝大多数CSS属性(包括 margin)来说,百分比都是以其父元素的尺寸为基准进行解析的。

CSS领域有一个很常见的现象,真正的解决方案往往来自于我们最意想不到的地方。在这个例子中,答案来自于CSS变形属性。当我们在 translate() 变形函数中使用百分比值时,是以这个元素自身的宽度和高度为基准进行换算和移动的,而这正是我们所需要的。接下来,只要换用基于百分比的CSS变形来对元素进行偏移,就不需要在偏移量中把元素的尺寸写死了。这样我们就可以彻底解除对固定尺寸的依赖。

1 main {
2   position: absolute;
3   top: 50%;
4   left: 50%;
5   transform: translate(-50%, -50%);
6 }

translate样式效果

这个元素已经完美居中了,完全满足我们的期望。当然没有任何技巧是十全十美的,上面这个方法也有一些需要注意的地方:


  • 我们有时不能选用绝对定位,因为它对整个布局的影响太过强烈。
  • 如果需要居中的元素已经在高度上超过了视口,那么它的顶部会被视口裁剪掉。有一些办法可以绕过这个问题,但hack味道过浓。
  • 在某些浏览器中,这个方法可能会导致元素的显示有一些模糊,因为元素可能被放置在半个像素上。这个问题可以用 transform-style: preserve-3d 来修复,不过这个修复手段也可以认为是一个hack,而且很难保证它在未来不会出问题。


当需要居中的元素在高度上超过了视口,它的顶部会被裁掉


基于视口单位的解决方案


假设我们不想使用绝对定位,仍然可以采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动;但是在缺少left和top的情况下,如何把这个元素的左上角放置的容器的正中心呢?

我们的第一反应很可能是用margin属性的百分比值来实现,就像这样:

1 main {
2   width: 12em;
3   margin: 50% auto 0;
4   transform: translateY(-50%);
5 }

产生的效果如下:

基于margin属性百分比值的样式效果

这段代码产生的效果十分离谱。原因在于margin的百分比值时以父元素的宽度作为解析基准的。没错,即使对于margin-top和margin-bottom来说也是这样!

不过幸运的是,如果只是想把元素相对于视口进行居中,仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位,称为视口相关的长度单位。


  • vw 是与视口宽度相关的。与常人的直觉不符的是,1vw 实际上表示视口宽度的 1%,而不是 100%。
  • 与 vw 类似,1vh 表示视口高度的 1%。
  • 当视口宽度小于高度时,1vmin 等于 1vw,否则等于 1vh。
  • 当视口宽度大于高度时,1vmax 等于 1vw,否则等于 1vh。


在我们这个例子中,适用于外边距的是vh单位:

1 main {
2   width: 12em;
3   margin: 50vh auto 0;
4   transform: translateY(-50%);
5 }

在下图中我们可以看到,其效果堪称完美。当然,这个技巧的实用性是相当有限的,因为它只适用于在视口中居中的场景。

基于视口相关的长度单位的样式效果


基于Flexbox的解决方案


这是毋庸置疑的最佳解决方案,因为Flexbox(伸缩盒)是专门针对这类需求所设计的。我们之所以要讨论其他方案,仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。其实目前现代浏览器对 Flexbox 的支持度已经相当不错了。

我们只需写两行声明即可:先给这个待居中元素的父元素设置 display: flex(在这个例子中是元素),再给这个元素自身设置我们再熟悉不过的margin: auto(在这个例子中是

元素):
1 body {
2   display: flex;
3   min-height: 100vh;
4   margin: 0;
5 }
6  
7 main {
8   margin: auto;
9 }

请注意,当我们使用Flexbox时,margin: auto不仅在水平方向上将元素居中,垂直方向上也是如此。还有一点,我们甚至不需要指定任何宽度(当然,如果需要的话,也是可以指定的):这个居中元素分配到的宽度等于 max-content。

如果浏览器不支持Flexbox,页面渲染结果看起来就跟我们的起点图是一样的了(如果设置了宽度的话)。虽然没有垂直居中效果,但也是完全可以接受的。

Flexbo 的另一个好处在于,它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。

我们先给这个

元素指定一个固定的尺寸,然后借助Flexbox 规范所引入的align-items和justify-content属性,我们可以让它内部的文本也实现居中(我们可以对使用相同的属性来使
元素居中,但margin: auto方法要更加优雅一些,并且同时起到了回退的作用)。

1 main {
2   display: flex;
3   align-items: center;
4   justify-content: center;
5   width: 12em;
6   height: 8em;
7 }

用Flexbox把匿名文本框居中



文/康斌(简书作者)

原文链接:http://www.jianshu.com/p/913f8dff1388

«上一篇:CSS 各种定位(position)方式的区别
»下一篇:SEO的成败取决于关键词的合理选取!不服来辩
二维码
在线客服 返回顶部